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前 


HTML5、CSS3、jQuery Mobile 框架 等 知识 均 为 时 下 移动 Web 开发 的 前 沿 技术 。 本 书 不 仅 对 基 
本 的 开发 知识 进行 了 详细 介绍 ， 还 讲解 了 许多 开发 中 可 能 会 遇 到 的 问题 ， 在 介绍 基础 知识 的 同时 讲解 
大 量 的 开发 经 验 。 


本 书 内 容 


本 书 从 多 个 角度 对 移动 Web 开发 进行 详细 介绍 ， 从 基础 知识 到 实战 开发 都 有 所 涉及 。 本 书 主要 
分 为 五 部 分 ， 第 一 部 分 介绍 HTMLS 的 基础 知识 ， 包 括 语义 化 标签 、HTMLS 存储 、 实 时 通信 技术 、 
多 媒体 等 。 第 二 部 分 介绍 CSS3 以 及 移动 端 开 发 样式 等 相关 知识 和 应 用 方法 ， 包 括 移动 端 元 素 单位 、 
移动 端 布局 基础 知识 、CSS3 新 特性 等 。 第 三 部 分 介绍 JavaScript 基础 知识 , 包括 JavaScript 基本 语法 、 
JavaScript 常用 方法 以 及 如 何 使 用 JavaScript 进行 移动 Web 开发 。 第 四 部 分 介绍 非常 流行 、 高 效 的 移 
动 端 Web 开发 框架 jQuery Mobile， 整 体 梳理 了 如 何 使 用 jQuery Mobile 进行 移动 端 Web 开发 。 第 五 
部 分 介绍 项 目 实战 ， 手 把 手 地 教 读者 从 无 到 有 ， 使 用 本 书 介绍 的 丰富 知识 和 经 验 进行 移动 Web 应 用 
开发 。 
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第 11 章 Flex 布局 FlexBox 
第 12 章 使 用 CSS3 新 特性 
第 13 章 DOM 操作 

第 14 章 JavaScript 对 象 

第 15 章 JavaScript 基本 语法 
第 16 章 Window 对 象 

第 17 章 函数 

第 18 章 jQuery 中 的 选择 器 
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第 19 章 jQuery 中 的 DOM 方法 

第 20 章 jQuery 操纵 CSS 样式 

第 21 章 jQuery 中 的 动画 效果 

第 22 章 jQuery 中 的 AJAX 

第 23 章 jQuery Mobile 组 件 

第 24 章 jQuery Mobile 的 触摸 事件 
第 25 章 jQuery Mobile 表单 

第 26 章 jQuery Mobile 列表 

第 27 章 jQuery Mobile 项 目 结构 

第 28 章 MAKR: MR APP 的 开发 


下 载 资源 


本 书 下 载 资源 地 址 : https://pan.baidu.com/s/1bpvw3uf (注意 区 分 数字 和 英文 字母 大 小 
写 ) 。 如 果 下 载 有 问题 ， 请 发 送 电 子 邮件 至 booksaga@126.com， 邮 件 标题 为 “HTML5+jQuery 
Mobile 移动 应 用 开发 下 载 资源 ”。 

为 了 让 大 家 更 好 地 学 习 HTML5 的 相关 知识 ， 还 可 以 加 QQ 技术 交流 群 ， 425975187。 


读者 对 象 

本 书 适合 零 基础 、 想 从 事 移 动 Web 前 端 开发 的 开发 者 以 及 对 移动 Web 前 端 技术 感 兴趣 的 读者 阅 
读 。 无 论 是 在 校 计算 机 相关 专业 学 生 ， 还 是 已 经 从 事 移动 Web 开发 的 开发 者 ， 都 能 在 本 书 中 有 所 
收获 。 


由 于 作者 水 平 有 限 ， 书 中 难免 有 疏漏 之 处 ， 敬 请 广大 读者 批评 指正 。 
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认识 HTML 


本 章 内 容 要 点 : 

* HTML 文档 结构 

31 HTML 文档 构成 要 素 以 及 属性 和 标签 

学 习 Web 前 端 开 发 ， 第 一 步 就 是 学 习 HTML 语言 。HTML 是 一 个 网 页 的 骨架 ，HTML 中 编写 
的 内 容 ， 就 是 Web 页 面 显 示 的 内 容 。 虽 然 HTML 对 于 Web 前 端 开 发 十 分 重要 ， 但 它 也 是 非常 容 
易学 习 的 。 本 章 我 们 先 来 认识 HTML 文档 及 其 属性 和 标签 等 内 容 。 











1.1 HTML 基本 介绍 


学 习 HTML， 主 要 学 习 的 就 是 HTML 的 标签 、 属 性 以 及 HTML 结构 ， 本 节 我 们 先 来 认识 这 些 
HTML 文档 的 构成 要 素 。 


1. 标签 
一 个 页 面 的 HTML 部 分 是 由 各 种 标签 组 成 的 ， 一 个 典型 的 HTML 页 面 结构 如 下 : 
<html> 
<head></head> 
<body> 
<hl> 我 是 标题 </h1l> 
<p> 我 是 段落 </p> 
</body> 


</html> 
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标签 在 HTML 中 成 对 出 现 ， 起 始 标签 是 由 一 对 尖 括 号 和 英文 字母 组 成 的 ， 如 <p>， 结 束 标签 
在 起 始 标签 的 英文 字母 前 面 加 一 个 /， 如 </p>。 这 样 的 一 对 标签 内 填写 的 内 容 就 是 这 对 标签 包含 的 
内 容 。<html> 标 签 是 根 标签 ， 所 有 页 面 中 的 其 他 内 容 都 要 放置 在 <html> 的 起 始 和 终止 之 间 。 在 
<body> 标 签 中 , 放置 的 是 页 面 要 显示 的 主要 内 容 ; <head> 标 签 中 放置 一 些 配置 信息 , 例如 引入 CSS、 
JavaScript 外 部 脚本 等 。 这 些 将 在 相应 的 章节 进行 介绍 。 


2. 属性 
每 一 个 HTML 标签 都 可 以 指定 属性 ， 为 标签 指定 属性 的 示例 如 下 : 
<p class="para" id="p1"> 段 落 内 容 </p> 


上 面 的 代码 中 ,为 p 标签 指定 了 两 个 属性 ,分 别 是 class 属性 和 id 属性， 并 且 为 这 两 个 属性 设 
定 了 属性 值 。 不 同 的 标签 可 以 设 定 的 属性 不 同 ， 但 是 所 有 标签 都 可 以 设 定 class 属性 和 id 属性， 这 
两 个 属性 和 CSS 关系 紧密 ， 是 最 常用 的 属性 ， 将 在 后 面 进行 介绍 。 

有 些 标签 的 可 设 定 属性 可 以 让 这 些 标签 有 特殊 的 样式 和 功能 ， 这 些 不 同 的 内 置 可 设 定 属性 由 
HTML 规范 定义 。 

除 此 之 外 ， 也 可 以 自 定 义 一 些 HTML 规范 中 没有 的 属性 ， 这 样 做 的 主要 目的 是 方便 使 用 
Javascript 操作 页 面 中 的 元 素 ， 尤 其 是 jQuery Mobile 框架 中 ， 频 繁 使 用 了 自 定义 属性 ， 这 些 将 在 后 
面 的 章节 进行 介绍 。 


3. 结构 


HTML 是 一 个 Web 前 端 页 面 的 骨架 , 因此 HTML 的 结构 很 重要 。HTML 主要 通过 标签 的 霸 套 
实现 结构 的 搭建 。 例 如 ， 上 面 的 例子 就 构成 了 一 个 最 基本 的 结构 ，body 标签 中 堪 套 了 标题 和 一 个 
段落 文字 内 容 。 复 杂 的 HTML 结构 原理 也 一 样 ， 在 制作 Web 页 面 之 前 ， 先 画 好 设计 图 ， 然 后 根据 
页 面 各 个 元 素 的 媒 套 关系 进行 梳理 ， 就 可 以 快速 搭建 起 Web 页 面 的 框架 。 


1.2 HTML 常用 标签 


1. 标题 
HTML 中 内 置 了 一 些 可 以 用 来 设置 标题 的 标签 ， 从 <h1> 一 直到 <h6>， 这 些 标签 内 放置 的 文字 
都 有 预先 定义 好 的 文字 样式 。 它 们 内 部 的 文字 字号 比较 大 ， 并 且 已 经 进行 了 加 粗 。hl 的 标题 最 明 
显 ，h6 的 标题 最 小 。 
虽然 标题 标签 已 经 预先 设 定好 了 样式 , 但 是 仍然 可 以 通过 CSS 等 手段 进行 自 定义 的 样式 修改 。 
在 HTML 中 ， 有 很 多 和 标题 标签 类 似 的 标签 ， 这 些 标签 都 有 自己 预先 设 定好 的 样式 ， 但 它们 不 是 
固定 的 ， 都 可 以 借助 CSS 等 手段 进行 修改 。 
<html> 
<head></head> 
<body> 
<hl> 点 击 下 方 超 链 接 跳 转 到 百度 </hl> 
<a href="www.baidu.com"> 跳 转 至 百度 </a> 
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</body> 
</html> 
在 上 面 的 例子 中 ， 单 击 “ 跳 转 至 百度 ”， 页 面 就 会 跳 转 到 href 属性 指定 的 页 面 。 
和 标题 标签 一 样 ， 超 链接 标签 也 有 预先 定义 好 的 样式 ， 例 如 鼠标 滑 过 超 链接 会 出 现下 划 线 ， 
单 击 后 超 链接 颜色 会 发 生变 化 。 这 些 也 都 是 可 以 通过 CSS 代码 进行 修改 的 。 


2. 超 链 接 


超 链接 标签 是 使 用 很 广泛 的 标签 ， 用 <a></a> 表 示 。 超 链接 的 起 始 和 终止 标签 之 间 放置 要 现实 
的 内 容 。 超 链接 的 最 主要 目的 是 跳 转 到 链接 的 页 面 , 这 就 需要 设 定 超 链接 标签 的 核心 属性 href, href 
属性 设 定 为 一 个 网 站 链接 时 ， 当 单 击 页 面 上 这 个 标签 的 元 素 后 ， 就 会 跳 转 到 对 应 的 链接 。 


3. 块 元 素 


HTML 中 最 常用 的 是 <div> 元 素 。 页 面 中 的 每 一 个 部 分 都 可 以 看 成 是 一 个 div。 一 般 的 页 面 都 
是 用 一 系列 的 div 标签 构建 起 来 的 , 通过 div 标签 搭建 页 面 结构 。 下 面 是 使 用 <div> 标 签 构建 页 面 的 
简单 例子 。 
<html> 
<head></head> 
<body> 
<div> 
<p> 我 是 第 一 部 分 </p> 
<div></div> 
</div> 
<div> 
<p> 我 是 第 二 部 分 </p> 
</div> 
</body> 
</html> 
在 上 面 的 代码 中 ， 通 过 div 元 素 的 嵌 套 ， 将 页 面 分 成 了 两 部 分 ， 每 个 部 分 又 可 以 使 用 div 元 素 
继续 划分 。 
4. 图 像 标签 
在 一 个 页 面 上 引入 图 像 的 方法 也 很 简单 ， 只 需要 借助 <img> 标 签 就 可 以 了 。img 标签 有 一 个 属性 
是 src， 这 个 属性 用 来 指定 要 显示 的 图 像 路 径 ， 这 样 就 可 以 在 页 面 中 显示 对 应 的 图 像 了 。 
1.3 HTML 表单 


表单 是 HTML 中 很 重要 的 一 部 分 。 表 单 对 应 的 标签 是 form 元 素 ， 内 部 放置 多 个 可 输入 的 标签 
input 以 及 提交 按钮 。 下 面 是 一 个 form 表单 的 实例 。 
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<from> 

姓名 : <input type="text"/> 

电话 : <input type="text"> 

<input value=" 提 交 " type="submit"> 
</form> 


上 面 的 代码 定义 了 一 个 最 基础 的 表单 ， 下 面 将 对 这 个 表单 的 各 个 元 素 逐 一 介绍 。 
1. form 标签 


form 标签 是 表单 的 容器 元 素 ， 内 部 通过 一 些 输 入 标签 组 建 一 个 HTML 表单 。form 表单 有 一 些 
重要 的 可 设置 属性 。 首 先是 method 属性 ， 它 定义 了 当 表 单 提交 时 的 提交 方式 ， 包 括 GET、POST 
等 方法 。 其 次 是 action 属性 ，action 属性 指定 表单 提交 到 哪个 地 址 ， 也 就 是 后 台 提 供 的 对 应 接口 。 


2. input 标签 


input 标签 是 表单 内 主要 的 内 容 元 素 。 一 个 input 标签 对 应 一 个 输入 框 , 用 户 可 以 在 其 中 输入 内 
容 。input 标签 的 type 属性 定义 了 这 个 输入 框 的 类 型 ， 当 像 上 面 的 代码 一 样 将 type 设置 为 text 时 ， 
表示 输入 的 基本 文本 内 容 。 当 type 设置 为 password 时 ， 表 示 这 个 输入 框 要 输入 的 是 密码 ， 当 用 户 
在 这 种 input 标签 中 输入 内 容 时 ， 网 页 会 自动 将 用 户 输入 的 内 容 隐藏 ， 变 为 黑色 的 圆 点 。 当 type 设 
置 为 submit 时 ,表示 这 是 一 个 提交 按钮 , 当 用 户 单 击 这 个 按钮 时 ,用 户 会 自动 提交 这 个 表单 到 action 
指定 的 链接 。 

在 HTMLS5 新 规范 中 ,为 input 标签 的 type 属性 添加 了 很 多 其 他 功能 丰富 的 属性 值 ， 可 以 用 来 
建立 表单 中 各 种 各 样 的 输入 框 。 这 将 在 后 文中 详细 介绍 。 

另 一 个 关于 input 很 重要 的 属性 是 name 属性 ， 这 个 属性 是 前 端 和 后 端 交互 的 关键 。input 标签 
设 定 的 name 值 是 什么 ， 服 务 器 获取 到 的 输入 标签 的 代号 就 是 什么 。 因 此 在 为 input 元 素 设 定 name 
属性 时 ， 一 定 要 注意 和 后 台 同 学 正确 对 接 。 





1.4 HTML # CSS 的 简单 交互 


HTML 的 样式 需要 CSS 来 进行 设置 ， 二 者 关系 非常 紧密 。 如 何 使 用 CSS 进行 Web 页 面 丰富 
的 样式 设 定 在 后 面 的 章节 有 详细 介绍 ， 这 里 先 简单 介绍 一 下 HTML 和 CSS 交互 的 基本 方法。 

前 面 说 过 ，HTML 的 大 部 分 标签 都 可 以 设 定 两 个 属性 ， 一 个 是 class 属性 ， 另 一 个 是 id 属性 。 
通过 这 两 个 属性 ， 就 可 以 在 CSS 中 为 这 些 元 素 设 定 样式 。 可 以 为 多 个 标签 设 定 相 同 的 class 属性 ， 
然后 在 CSS 中 ,使 用 特定 的 CSS 语法 可 以 获取 这 些 HTML 元 素 ， 并 为 其 设 定 样式 。id 属性 的 道理 
和 class 属性 类 似 ， 只 是 原则 上 一 个 id 值 只 能 出 现 一 次 。 

HTML 是 搭建 Web 页 面 所 需 的 最 基础 的 知识 ， 也 是 一 个 Web 页 面 的 骨架 。HTML 的 学 习 很 
简单 ， 只 要 经 常 使 用 就 能 非常 熟练 。 在 下 面 的 章节 中 ， 我们 开始 介绍 新 一 代 的 HTMLS5 标准 中 对 基 
本 HTML 的 强大 扩展 。 


语义 化 标签 


本 章 内 容 要 点 : 

* 语义 化 标签 的 概念 

* 语义 化 标签 的 使 用 及 示例 

在 HTML5 以 前 ，HTML 中 的 标签 只 有 有 限 的 几 种 ， 诸 如 <div>、<ul>、<table> 等 ， 这 些 标签 可 
以 帮助 开发 者 在 页 面 中 定义 最 基本 的 组 件 〈 如 列表 、 表 格 等 ) 。 然 而 ， 随 着 Web 开发 的 发 展 ， 这 些 
基本 标签 已 经 不 能 满足 开发 者 的 需求 。 由 于 基本 HTML 标签 种 类 少 ， 开 发 出 的 HTML 基本 都 是 许多 
<div> 堆 砌 起 来 的 缺乏 意义 的 文档 ， 因 此 HTML5 语义 化 标签 应 运 而 生 。 使 用 HTMLS 中 的 语义 化 标 
签 构建 的 HTML 文档 含义 更 加 明晰 ， 便 于 页 面 结构 的 体现 和 后 期 维护 。 


2.1 什么 是 语义 化 标签 


在 HTML5 推出 之 前 ， 开 发 者 通常 使 用 div 来 表示 页 面 中 的 各 个 部 分 ， 但 是 这 些 div 没有 什么 
实际 意义 〈 包 括 使 用 CSS 样式 的 id 和 class 等 内 容 ) 。 这 些 标签 只 是 开发 者 提供 给 浏览 器 的 指令 ， 
用 于 定义 一 个 网 页 的 某 些 部 分 。 

以 前 在 进行 HTML 开发 时 都 会 罗列 一 系列 的 div 标签 , 导致 HTML 代码 无 结构 性 、 语义 混乱 。 
其 实 ，HTML 代码 是 非常 重要 的 ， 不 仅 代表 页 面 的 结构 ， 还 要 让 后 面 的 人 能 够 通过 HTML 代码 对 
页 面 的 基本 结构 一 目 了 然 , 以 便于 后 期 的 开发 和 维护 .以 前 开发 者 只 能 使 用 一 系列 的 div tít HTML 
结构 的 编写 ， 虽 然 指定 了 CSS 中 的 id 和 class， 但 是 命名 不 一 定 是 规范 的 ， 其 他 开发 人 员 也 可 能 看 
不 懂 之 前 的 HTML 结构 。 
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从 HTML5 开始 ， 出 现 了 语义 化 标签 。 在 语义 化 标签 中 定义 了 丰富 的 类 似 div 但 是 各 有 含义 的 
标签 ， 用 来 帮助 开发 者 更 清楚 地 构建 HTML 结构 。 

HTML5 帮 开 发 者 指定 了 每 一 个 语义 化 标签 应 该 使 用 的 位 置 、 内 部 结构 等 。 这 些 并 不 是 HTML 
语义 化 标签 的 主要 优势 ， 下 面 简单 说 明 HTML5 语义 化 标签 到 底 可 以 为 开发 者 带 来 什么 好 处 。 

1. 使 页 面 泻 染 更 有 意义 

语义 化 标记 为 设备 提供 了 所 需 的 相关 信息 ， 无 须 开 发 人 员 考 虑 所 有 可 能 的 显示 情况 (包括 现 
有 的 或 者 将 来 的 设备 )。 例如， 一 部 手机 可 能 会 使 一 段 标记 了 标题 的 文字 以 粗 体 显示 ,掌上 电脑 则 
可 能 会 以 比较 大 的 字体 来 显示 。 无 论 哪 种 方式 , 一 旦 开发 人 员 将 文本 标记 为 标题 , 就 可 以 确信 读 取 
设备 将 根据 自身 的 条 件 来 显示 合适 的 页 面 。 

2. 便于 团队 的 后 期 维护 

如 果 为 标签 提供 CSS 中 的 id 和 class， 很 可 能 会 出 现 不 规范 的 情况 。 当 开发 者 使 用 语义 化 标签 
后 ， 由 于 语义 化 标签 是 规范 的 ， 因 此 方便 了 后 期 维护 。 

3. 使 HTML 结构 更 加 清晰 

使 用 HTML 语义 化 标签 可 以 让 页 面 的 结构 更 加 清晰 ， 按 照 规范 定义 的 页 面 ， 便 于 大 家 快速 了 
解 每 一 个 结构 的 功能 和 作用 。 

4. 为 搜索 提供 帮助 

SEO 优化 等 语义 化 标签 可 以 给 搜索 引擎 一 个 更 清晰 、 更 好 的 搜索 信号 ， 让 页 面 更 容易 被 搜索 。 

当然 ， 有 了 语义 化 标签 ， 并 不 代表 不 需要 div T, div 仍然 是 很 重要 的 。 此 外 ， 语 义 化 标签 基 
本 不 会 为 开发 者 的 页 面 添加 样式 ， 还 需要 使 用 CSS 代码 对 样式 进行 控制 。 因 此 ， 要 明确 HTML5 
语义 化 标签 的 目的 ， 即 让 页 面 的 结构 更 加 清晰 、 更 加 便于 阅读 和 解析 。 

下 面 我 们 将 逐一 介绍 HTML5 为 开发 者 提供 的 语义 化 标签 。 





2.2 header 标签 


header 标签 主要 用 来 定义 页 面 的 页 眉 ， 如 标题 等 。 如 果 开 发 者 想 为 自己 的 页 面 添 加 一 个 导航 
栏 ， 就 可 以 使 用 header 这 个 标签 。 


【示例 】 ”使 用 header 标签 的 代码 如 下 : 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" > 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 

</style> 

</head> 
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<body> 
<header> 
<hgroup> 
<h1> 网 站 标题 </h1> 
<h1> 网 站 副标题 </h1> 
</hgroup> 
</header> 
</body> 
</html> 


使 用 div 的 HTML 结构 如 下 : 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div class="header"> 
<div class="top"> 
<ul> 
<I 户 导航 <ll 放 
<l> 导 航 </i> 
<I 记 导航 <ll 放 
<I 户 导航 <l 记 
<li> 导 航 </i> 
</ul> 
</div> 
<div class="nav"> 
<input type="search" placeholder=" 输 入 内 容 "> 
</div> 
</div> 
</body> 
</html> 


对 比 一 下 ,可 以 看 出 使 用 div 的 页 面 结构 十 分 混乱 ， 并且 需 要 开发 者 自己 设 定 元 素 的 class 等 ， 
以 表明 其 含义 。 现 在 很 多 网 站 都 流行 两 个 导航 栏 ， 使 用 div 的 时 候 ， 如 果 想 定义 这 样 的 结构 ， 就 需 
要 用 不 同 class 的 div， 比 如 上 面 的 nav 和 top， 显 然 会 让 人 误解 。 如 果 使 用 语义 化 标签 ， 那 么 使 用 
两 个 <hgroup> 即 可 将 网 站 的 导航 栏 分 开 ， 无 疑 会 让 页 面 的 结构 更 加 清晰 。 
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2.3 footer 标签 


footer 标签 代表 “网 页 ”或 “section” 的 页 脚 ， 通 常 含有 该 节 的 一 些 基 本 信息 ， 辟 如 作者 、 相 
关 文 档 链 接 、 版 权 资料 。 如 果 footer 标签 包含 整 节 ， 就 会 代表 附录 、 索 引 、 提 拔 、 许 可 协议 、 标 签 、 
类 别 等 信息 。 

一 般 网 页 最 下 面 都 有 一 个 copyright 部 分 ， 这 一 部 分 就 属于 footer 标签 的 应 用 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<footer> 


页 脚 部 分 内 容 
</footer> 


</body> 
</html> 


在 一 个 文档 中 可 以 使 用 多 个 footer 标签 , 既 可 以 在 整个 网 站 的 最 下 面 使 用 footer 标签 , 也 可 以 
为 页 面 中 的 每 一 个 部 分 都 指定 footer 标签 ， 让 页 面 更 有 层次 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

<style type="text/css"> 

</style> 

</head> 

<body> 

<div class="main"> 

<header></header> 
<div class="container"></div> 
<footer></footer> 
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</div> 
<div class="section"> 
<header></header> 
<div class="container"></div> 
<footer></footer> 
</div> 
</body> 
</html> 


这 个 模拟 页 面 中 存在 两 部 分 。 分 别 为 这 两 部 分 指定 footer 标签 , 就 可 以 清晰 地 看 出 页 面 中 的 哪 
一 部 分 是 页 脚 了 。 
在 页 脚 中 ， 通 常 都 会 清楚 地 标 出 开发 者 的 地 址 信息 ， 如 图 2-1 所 示 。 


ER 


图 2-1 
在 HTML5 中 也 有 对 应 的 标签 ， 就 是 <address>。W3C 规范 规定 ， 在 页 脚 中 出 现 的 地 址 一 定 要 
放 在 <address> 之 中 。 这 并 没有 改变 任何 页 面 样式 ， 只 是 为 了 形成 一 种 规范 ， 让 页 面 的 HTML 结构 
看 起 来 更 清晰 。<address> 标签 通常 会 连同 其 他 信息 包含 在 <footer> 标 签 中 。 





24 nav 标签 


nav 标签 用 来 规定 哪个 区 域 属于 导航 区 域 。 注意 , nav 标签 主要 用 来 定义 页 面 中 的 主导 航 部 分 。 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div class="main"> 





<nav> 

<ul> 
<li> 导 航 1</i> 
<li> $i 2</li> 
<li> Ffi 3</li> 
<li> Fi 4</li> 
<li> $f 5</li> 
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</ul> 
</nav> 
</div> 
</body> 
</html> 


这 里 使 用 nav 标签 标示 出 开发 者 导航 内 容 的 部 分 。HTML5 的 语义 化 标签 就 是 为 了 让 HTML 
代码 有 更 加 良好 的 结构 以 及 明确 的 语义 。 试 想 一 下 ， 上 面 的 代码 如 果 不 使 用 nav 标签 ， 而 使 用 带 有 
class 的 div 标签 ， 是 不 是 不 太 规范 了 呢 ? 页 面 中 可 能 存在 多 个 ul 标签 ， 但 是 主导 航 只 有 一 个 。 使 
用 nav 将 表示 导航 的 册 包 右 起 来 ， 可 以 让 页 面 的 HTML 结构 更 加 清晰 。 


2.5 article 标签 


article 标签 用 来 包含 一 段 文 字 内 容 的 区 域 。 要 想 知道 这 个 标签 使 用 在 什么 地 方 , 最 好 了 解 一 下 
article 这 个 标签 是 如 何 诞生 的 。 

<article> 元 素 的 潜在 来 源 包括 论坛 帖子 、 报 纸 文章 、 博 客 条 目 、 用 户 评论 。 正 是 因为 页 面 中 
常常 存在 这 些 类 似 的 区 域 ， 所 以 需要 使 用 一 个 标签 ， 显 式 地 标明 这 部 分 是 用 来 装载 一 组 文字 的 。 这 
组 文字 是 独立 的 ， 就 像 一 篇 文章 一 样 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div class="main"> 
<article> 
<h3> 发 帖 标题 </h3> 
<p> 发 帖 内 容 </p> 
<footer> 帖 子 作者 、 创 作 时 间 </footer> 
</article> 
<article> 
<h3> 发 帖 标题 </h3> 
<p> 发 帖 内 容 </p> 
<footer> 帖 子 作者 、 创 作 时 间 </footer> 
</article> 
<article> 
<h3> 发 帖 标题 </h3> 
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<p> 发 帖 内 容 </p> 


<footer> 帖 子 作者 、 创 作 时 间 </footer> 


</article> 
</div> 
</body> 
</html> 


本 示例 代码 使 用 了 多 个 article 标签 ， 自 然而 然 地 将 多 个 帖子 分 成 了 语义 明确 的 几 个 


些 区 块 之 间 相 互 独立 ， 每 一 个 article 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 





区 块 。 这 





区 域 又 使 用 h3、p、footer 来 区 分 标题 、 主 体内 容 以 及 页 脚 区 
域 。 和 满 是 div 的 结构 相 比 ， 这 种 结构 的 优势 一 目 了 然 。 不 要 以 为 使 用 语义 化 标签 只 是 
异 ， 当 页 面 越 来 越 复杂 的 时 候 ， 语 义 化 标签 和 堆 满 div 的 HTML 页 面 结构 差距 还 是 很 大 的 。 

article 标签 还 可 以 内 柑 ， 下 面 给 出 一 个 例子 。 


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 


<style type="text/css"> 
</style> 
</head> 
<body> 
<div class="main"> 
<article> 
<header> 
主 内 容 标题 
</header> 
<div class="content"> 
<article> 
<h3> 评 论 标题 </h3> 
<p> 评 论 内 容 </p> 


<footer> 评 论 作 者 、 发 布 时 间 </footer> 


</article> 

<article> 
<h3> 评 论 标题 </h3> 
<p> 评 论 内 容 </p> 


<footer> 评 论 作 者 、 发 布 时 间 </footer> 


</article> 

<article> 
<h3> 评 论 标题 </h3> 
<p> 评 论 内 容 </p> 


<footer> 评 论 作 者 、 发 布 时 间 </footer> 


</article> 


一 小 点 差 
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</div> 
</article> 
</div> 
</body> 
</html> 


这 种 结构 十 分 常见 ， 一 个 文章 下 面 是 一 些 评论 内 容 。 使 用 article 嵌 套 的 好 处 是 可 以 让 阅读 
HTML 代码 结构 的 人 很 清楚 代码 的 含义 ， 即 哪些 article 之 间 是 相互 有 关联 的 、 哪 些 article 之 间 是 
相互 独立 的 。 


2.6 section 标签 


section 标签 定义 的 是 文档 中 的 区 段 ， 比 如 章节 、 页 眉 、 页 脚 或 文档 中 的 其 他 部 分 。 在 一 段 独 
立 的 内 容 中 ， 有 一 部 分 跟 整 体 有 关联 ， 但 是 又 有 自己 的 含义 ， 这 时 就 可 以 使 用 section。 例 如 ， 在 
百度 百科 中 ,介绍 关键 字 的 时 候 ， 有 的 字 被 标 成 了 蓝 色 ,这 部 分 就 可 以 使 用 section 标签 ， 如 图 2-2 
所 示 。 


百度 百科 旨 在 创造 一 个 涵盖 各 领域 知识 的 中 文 信息 收集 平台 。 百 度 百 科 强调 用 户 的 参与 和 奉献 精神 ， 充 分 调动 互联 网 用 户 的 
内 量 ， 汇 聚 上 亿 用 户 的 头脑 智慧 ， 积 极 进行 交流 和 分 享 。 同 时 ， 百 度 百科 实现 与 百度 搜索 、 百 度 知 道 的 结合 ， 从 不 同 的 层次 上 满 


足 用 户 对 信息 的 需求 。 ["] 





图 2-2 


在 section 标签 中 可 以 指定 一 个 cite 属性 并 为 这 个 属性 传递 一 个 URL。 需 要 注意 的 是 ， 这 个 
URL 并 不 会 自动 跳 转 到 相应 的 Web 链接 ， 而 只 是 一 个 HTML 代码 中 的 参照 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div class="main"> 
<article> 
<header> 标 题 <header> 
<article> 
<p> 一 部 分 内 容 </p> 
<section> 一 个 从 网 上 摘抄 的 内 容 </section> 
<p> 一 部 分 内 容 </p> 
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</article> 
</article> 
</div> 
</body> 
</html> 


开发 者 在 给 article 编辑 内 容 的 时 候 ， 使 用 了 section"， 用 于 区 分 一 块 从 网 站 上 摘抄 的 内 容 。 当 
然 最 好 为 这 个 section 指定 cite 属性 ， 以 表明 开发 者 从 网 站 上 引用 内 容 的 来 源 。 


2.7 aside 标签 


aside 标签 定义 的 是 所 处 内 容 之 外 的 内 容 。 这 个 概念 看 起 来 不 太 好 理解 ， 但 是 想 一 想 平常 看 到 
过 的 网 站 ， 就 可 以 理解 其 中 的 含义 了 。 

在 访问 网 站 的 过 程 中 ， 有 些 文章 会 内 嵌 一 个 广告 ， 这 个 广告 其 实 就 属于 aside 的 范畴 。 广 告 本 
身 和 这 个 区 域 的 文章 内 容 并 没有 什么 关系 , 却 被 放 在 了 这 块 区 域 之 内 , 这 个 广告 是 所 处 内 容 之 外 的 
内 容 。 

在 页 面 中 ， 如 果 需 要 侧 栏 、 广 告 位 等 ， 就 可 以 将 它们 放 在 aside 中 ， 请 看 下 面 的 例子 。 

【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div class="main"> 
<article> 
<header> 标 题 </header> 
<article> 
<p> 一 部 分 内 容 </p> 
<section> 一 个 从 网 上 摘抄 的 内 容 </section> 
<p> 一 部 分 内 容 </p> 
</article> 
<article> 
<p> 一 部 分 内 容 </p> 
<section> 一 个 从 网 上 摘抄 的 内 容 </section> 
<p> 一 部 分 内 容 </p> 
</article> 
<aside> 
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<div class="ad"> 广 告 内 容 </div> 
</aside> 
</article> 
</div> 
</body> 
</html> 


本 章 我 们 学 习 了 HTML5 中 的 语义 化 标签 ,使 用 这 些 标签 可 以 更 轻松 地 编写 语义 清晰 的 HTML 
代码 结构 。HTML 代码 是 页 面 的 骨架 ， 非 常 重要 。 语 义 化 标签 在 代码 维护 、 规 范 以 及 移动 Web JF 
发 上 的 重要 性 不 可 小 视 。 





= 


见 频 和 音频 


本 章 内 容 要 点 : 

米 音频 播放 器 audio 标签 的 使 用 

3 视频 播放 器 video 标签 的 使 用 

在 网 页 中 插入 视频 或 者 音频 时 一 般 都 需要 使 用 插件 ， 比 如 Flash 等 。 

HTML5 规范 定义 了 可 以 直接 插入 网 页 中 的 多 媒体 标签 ， 包 括 视频 和 音频 ， 这 种 规范 不 但 更 易 
于 开发 者 开发 网 页 版 的 视频 和 音频 ， 而 且 让 网 页 中 多 媒体 方面 的 开发 更 加 标准 。 

现在 ， 越 来 越 多 的 网 站 用 HTMLS5 播放 器 对 Flash 播放 器 进行 展 绥 ， 从 而 更 好 地 展现 Web 应 用 
的 性 能 。HTMLS 多 媒体 规范 让 开发 者 在 HTML5 移动 端 开发 更 加 便捷 、 移 动 应 用 性 能 更 好 。 


3.1 音频 播放 器 一 一 audio 


3.1.1 audio 标签 的 使 用 


audio 标签 用 来 播放 来 自 网 络 上 的 音频 文件 。 现 在 大 多 数 网 络 音乐 平台 都 已 经 使 用 audio 进行 
音频 播放 ， 图 3-1 所 示 是 QQ 音乐 中 的 audio 标签 。 
P <a href="javascript:;" class="btn_bottom_player js_openplayer">..</a> == $0 


<audio id="h5audio_media'" height="0" width="0" autoplay="false" src="http:// 
dl.stream.qqmusic.qq.com/C200002anWXU00r5le.m4a?vkey=1ED214A0269.. 











BB4379055A2DFE2442B579EE1A254E68EF76A8F6CDF2781&guid=9953862850&fromtag=30"></audio 
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使 用 audio 标签 很 简单 ， 只 要 将 其 src 属性 指定 为 一 个 确定 的 URL 音频 文件 即 可 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<audio src="http://dl.stream.qqmusic.qq.com/C200002anWXUOOrSle.m4a?vkey= 
1ED214A0269296BA62C00682C46C1A5F37B78809127777144B0874E86DD8B04EEBB4379055A2DFE2442B5 
79EE1A254E68EF76A8F6CDF2781 &guid=9953862850&fromtag=30"> 
您 的 浏览 器 不 支持 audio 标签 。 
</audio> 
</body> 
</html> 


3.1.2 ”如 何 获取 音频 文件 的 URL 


打开 一 个 音乐 平台 ， 转 到 音乐 播放 页 面 ， 查 看 网 页 源 代码 ， 寻 找 其 中 的 audio 标签 。audio 标 
签 中 src 周作 的 他 就 是 :可 播放 的 音频 文件 。 

打开 浏览 器 ， 可 以 发 现 开发 者 编写 的 代码 并 没有 播放 任何 音乐 ， 而 且 页 面 也 没有 音频 播放 器 。 
其 实 ， 音 频 文 件 已 经 在 开发 者 的 页 面 里 ， 但 是 audio 文件 目前 是 没有 播放 的 ， 因 为 无 法 在 页 面 中 控 
制 音乐 的 播放 或 者 暂停 。 要 解决 上 面 的 问题 很 简单 ，HTML5 中 的 audio 为 开发 者 提供 了 默认 的 空 
间 ， 只 要 在 标签 中 添加 controls 属性 ， 就 可 以 将 标签 显示 出 来 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<audio controls src="http://dl.stream.qqmusic.qq.com/C200002an WXU00r51le.m4a?vkey= 
1ED214A0269296BA62C00682C46C1A5F37B78809127777144B0874E86DD8B04EEBB4379055A2DFE2442B5 
79EE1A254E68EF76A8F6CDF2781 &guid=9953862850&fromtag=30"> 
您 的 浏览 器 不 支持 audio 标签 。 
</audio> 
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</body> 
</html> 


效果 如 图 3-2 所 示 。 Il 012/3183 @ ùA — 

再 次 打开 浏览 器 ， 会 发 现 已 经 出 现 默认 的 真正 
的 音频 播放 器 空间 ， 单 击 播放 按钮 ， 会 自动 播放 音 
频 ， 并 且 可 以 调节 音量 的 大 小 以 及 播放 的 进度 。 这 
些 都 是 HTML5 规范 中 的 audio 标签 给 开发 者 提供 的 
默认 控件 。 

现在 了 解 无 法 播放 音频 的 原因 了 : 最 开始 音频 文件 是 暂停 状态 ， 在 不 加 controls 属性 的 时 候 ， 
浏览 器 不 会 提供 默认 的 播放 音频 控件 。 

本 例 还 在 audio 标签 内 部 添加 了 “您 的 浏览 器 不 支持 audio 标签 ”的 提示 ， 如 果 用 户 的 浏览 器 
不 支持 audio 标签 ， 这 段 文字 内 容 便 会 显示 出 来 。 

除了 src 和 controls 属性 外 ，audio 标签 还 有 一 些 属性 ， 可 以 让 开发 者 更 简单 地 控制 HTML5 音 
频 播放 器 的 播放 。 


3.1.3 autoplay 属性 


默认 情况 下 音乐 是 不 会 播放 的 ， 必 须 通过 开始 播放 按钮 才能 让 音频 开始 播放 。audio 标签 中 有 
一 个 autoplay 属性 ， 将 其 设置 为 autoplay 就 可 以 在 页 面 加载 完 毕 后 自动 播放 音乐 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<audio controls autoplay="autoplay" src="http://dl.stream.qqmusic.qq.com/ 
C200002anWXU00r5le.m4a?vkey=1ED214A0269296BA62C00682C46C1A5F37B78809127777144B0874E86DD 
8B04EEBB4379055A2DFE2442B579EE1A254E68EF76A8F6CDF2781 &guid=9953862850&fromtag=30"> 
您 的 浏览 器 不 支持 audio 标签 。 
</audio> 
</body> 
</html> 


打开 浏览 器 ， 不 需要 单 击 开始 按钮 ， 音 频 自动 进行 播放 。 
autoplay 属性 只 有 autoplay 一 个 属性 值 , 如 果 不 想 让 音频 自动 播放 , 就 不 要 添加 autoplay 属性 。 











图 3-2 
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3.1.4 loop 属性 
默认 情况 下 ， 音 频 文 件 在 播放 完 一 次 后 就 会 自动 暂停 。loop 属性 可 以 让 音频 文件 循环 播放 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<audio controls loop="loop" srec="http://dl.stream.qqmusic.qq.com/C200002anWXU00r5le.m4a?vkey= 
1ED214A0269296BA62C00682C46C1A5F37B78809127777144B0874E86DD8B04EEBB4379055A2DFE2442B5 
79EE1A254E68EF76A8F6CDF2781 &guid=9953862850&fromtag=30"> 
您 的 浏览 器 不 支持 audio 标签 。 
</audio> 
</body> 
</html> 


loop 属性 只 能 指定 一 个 loop 值 。 当 将 loop 属性 指定 为 “loop” 时 ， 音 频 文 件 就 会 自动 循环 播 
放 。 

在 浏览 一 些 网 页 时 ,网 页 中 会 自动 出 现 背 景 音乐 , 而 且 无 限 循环 , 其 实 就 是 同时 使 用 了 autoplay 
和 loop 属性 。 


3.1.5 preload 属性 


preload 属性 用 来 指定 当 加 载 页 面 时 是 否 自动 加 载 音频 文件 。 该 属性 有 以 下 三 个 可 能 的 取 值 。 

@ auto: 当 页 面 加 载 后 载 入 整个 音频 。auto 是 默认 的 音频 播放 器 加 载 方式 ， 音 频 文件 会 随 着 
页 面 资 源 的 加 载 而 自动 加 载 。 
meta: 当 页 面 加 载 后 只 载 入 元 数据 。 
none: 当 页 面 加 载 后 不 载 入 音频 。none 表示 当 页 面 加 载 时 不 加 载 音 频 ， 除 非 开 发 者 在 页 面 
中 手动 加 载 音频 。 在 一 些 音乐 下 载 平台 上 搜索 某 个 歌手 ， 会 出 现 许多 歌曲 ， 而 且 可 以 在 当 
前 页 面 播放 。 如 果 在 加 载 页 面 时 自动 加 载 这 些 音频 文件 ， 就 会 使 页 面 加 载 许多 不 必要 的 文 
件 ， 而 且 这 些 文 件 的 总 量 很 大 ， 会 严重 影响 Web 性 能 。 这 时 ， 可 以 使 用 preload="none" 来 
设 定 不 将 音频 和 页 面 一 起 加 载 。 


3.1.6 audio 标签 支持 的 音频 文件 


目前 ，audio 标签 支持 MP3、Wav、Ogg 三 种 类 型 的 音频 文件 ， 对 应 不 同 浏览 器 的 支持 情况 如 
表 3-1 所 示 。 
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表 3-1 各 浏览 器 对 音频 文件 的 支持 情况 























mm 览 器 MP3 Wav Ogg 
Internet Explorer 9+ 支持 不 支持 不 支持 
Chrome 6+ | 支持 支持 支持 
Firefox 3.6+ | 支持 支持 支持 
Safari 5+ | 支持 支持 不 支持 

era 10+ 支持 支持 支持 

MP3 类 型 的 音频 文件 已 经 得 到 大 多 数 浏览 器 的 支持 。 

在 开发 时 ， 可 能 有 优选 的 音频 格式 ， 但 是 还 要 做 到 浏览 器 兼容 。 比 如 想 优先 使 用 Wav 格式 的 


音频 文件 ， 但 是 在 IE 浏览 器 中 不 支持 ， 所 以 只 能 用 MP3 或 者 Ogg 格式 的 音频 代替 。HTML5 为 开 


发 者 提供 了 一 种 专门 用 于 这 种 情况 的 标签 ， 即 source 标签 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<audio controls> 
<source src="test.mp3" type="audio/mpeg"> 
<source src="test.ogg" type="audio/ogg"> 
您 的 浏览 器 不 支持 audio 标签 。 
</audio> 
</body> 
</html> 





在 audio 标签 中 指定 了 两 个 source 标签 ， 分 别 设 定 src 属性 和 源 文件 对 应 的 数据 格式 。 这样， 浏览 


器 会 根据 顺序 选择 浏览 器 支持 的 文件 格式 的 源 文件 进行 播放 ， 就 解决 了 开发 者 刚才 的 需求 。 
3.2 ”视频 播放 器 一 一 video 


32.4 video 标签 的 使 用 


video 标签 用 来 播放 视频 文件 ， 是 HTML5 中 定义 的 视频 播放 器 标签 ， 用 来 取代 Flash 播放 器 
等 视频 播放 插件 。 目 前 许多 视频 平台 、 直播 平台 都 处 在 Flash 播放 器 向 HTML5 播放 器 过 渡 的 阶段 。 


图 3-3 所 示 是 哗 哩 哗 哩 视频 网 站 的 video 播放 器 代码 。 
与 audio 标签 类 似 ， 使 用 video 标签 时 ， 只 需要 为 其 指定 一 个 对 应 的 网 络 视频 URL 即 可 。 
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video src lob: http://www. bilibili. com/Sb73ffd4-5355-4c34-9457— 
35a6c5009351 ><“/video> == $6 
/div 
><div class="bilibili-player-video-float-panel-wrp">.</div:; 
> <div class="bilibili-player-video-info-container">.</div> 
图 3-3 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 





<style type="text/css"> 
</style> 
</head> 
<body> 
<video controls src="blob:http://www.bilibili.com/ 802619b8-7539-4e61-95df-4b9587a09bba"> 
您 的 浏览 器 不 支持 video 标签 。 
</video> 
</body> 
</html> 


32.2 video 标签 的 属性 


下 面 我 们 来 介绍 video 标签 的 属性 。 
1. controls 属性 
controls 标签 用 来 显示 HTML5 中 视频 播放 器 默认 的 控件 ， 包 括 播放 按钮 、 进 度 条 、 音 量 调节 


等 。 如 果 不 使 用 controls， 就 不 会 显示 视频 播放 器 空间 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<video controls src="blob:http://www.bilibili.com/802619b8-7539-4e61-95df-4b9587a09bba"> 
您 的 浏览 器 不 支持 video 标签 。 
</video> 
</body> 
</html> 
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上 面 的 代码 为 video 标签 添加 了 controls 属性 ， 在 浏览 器 中 已 经 可 以 正常 显示 视频 播放 器 控件 
并 进行 相应 操作 。 


2. height&width 属性 


width 和 height 用 来 设 定 视频 播放 器 的 宽度 和 高 度 , 这 里 所 说 的 宽度 和 高 度 是 指 视频 播放 器 空间 
所 占 的 宽 、 高 。 在 开始 HTML5 视频 播放 器 时 ， 一 定 要 设置 height 和 width 属性 ， 这 样 可 以 避免 发 生 
视频 播放 器 影响 页 面 布局 的 情况 。 比 如 ， 当 视频 在 页 面 加 载 完成 后 没有 成 功 加 载 ， 由 于 没有 为 其 设 
定 宽度 和 高 度 ， 因 此 video 标签 所 占据 的 位 置 就 不 存在 了 ， 从 而 影响 网 页 的 布局 。 

width 和 height 主要 用 来 指定 视频 播放 器 空间 的 宽 、 高 ， 不 要 用 这 两 个 属性 控制 真实 视频 的 宽 
度 和 高 度 。 因 为 height 和 width 并 不 能 改变 视频 本 身 的 高 度 和 宽度 , 即使 是 在 显示 上 对 其 有 所 影响 ， 
对 于 源 文件 来 说 也 是 没有 任何 影响 的 。 正 确 的 做 法 是 使 用 其 他 工具 或 者 利用 视频 转 码 技术 进行 视频 
的 转 码 ， 然 后 把 视频 添加 到 video 标签 中 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<video controls width="200" height="400" src="blob:http://www.bilibili.com/ 
802619b8-7539-4e61-95df-4b9587a09bba"> 
您 的 浏览 器 不 支持 video 标签 。 
</video> 
</body> 
</html> 


在 上 面 的 代码 中 ， 开 发 者 将 视频 的 高 度 定 义 为 400 像素 、 宽 度 定 义 为 200 像素 。 

3. loop 属性 

loop 属性 用 来 指定 视频 播放 器 是 否 进行 循环 播放 。 和 audio 标签 一 样 ， 默 认 情况 下 ， 视 频 在 播 
放 完 一 次 后 就 自动 停止 了 。 当 开发 者 为 video 标签 指定 loop 属性 后 , 视频 就 可 以 在 每 一 次 播放 结束 
后 自动 从 头 开始 播放 。 

【示例 】 

<!DOCTYPE> 

<html> 

<head> 


<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
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<style type="text/css"> 
</style> 
</head> 
<body> 
<video controls loop="loop" width="200" height="400" src="blob:http://www.bilibili.com/ 
802619b8-7539-4e61-95df-4b9587a09bba"> 
您 的 浏览 器 不 支持 video 标签 。 
</video> 
</body> 
</html> 
和 audio 标签 一 样 ，video 标签 的 loop 属性 只 有 loop 这 一 个 属性 值 。 
4. autoplay 属性 
autoplay 属性 用 来 定义 在 视频 加 载 完成 后 视频 播放 器 是 否 自 动 开 始 播放 视频 。 默 认 情 况 下 , 视 
频 在 加 载 完 成 后 不 会 播放 ， 而 是 等 待 用 户 单 击 播放 按钮 ， 触 发 相应 事件 后 才 开始 播放 。 当 为 video 
标签 指定 autoplay 属性 后 ， 视 频 在 加 载 完成 后 会 自动 进行 播放 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<video controls autoplay="autoplay" loop="loop" width="200" height="400" 
sre="blob:http://www.bilibili.com/802619b8-7539-4e61-95df-4b9587a09bba"> 
您 的 浏览 器 不 支持 video 标签 。 
</video> 
</body> 
</html> 


和 audio 标签 一 样 ，video 标签 的 autoplay 属性 只 有 autoplay 这 一 个 属性 值 。 

5. preload 属性 

preload 属性 用 来 指定 页 面 加 载 后 是 否 对 视频 进行 预 加 载 。 和 audio 一 样 ， 有 如 下 三 个 属性 值 。 
@ auto: 当 页 面 加 载 后 载 入 整个 视频 。 


@ meta: 当 页 面 加 载 后 只 载 入 元 数据 。 
@ none: 当 页 面 加 载 后 不 载 入 视频 。 


同样 ，video 标签 也 可 以 使 用 source 标签 来 指定 多 个 源 文件 。 和 audio 使 用 source 标签 的 作用 
相同 ，video 可 以 使 用 source 标签 指定 多 个 源 文件 来 适 配 不 同 的 服务 器 。 
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以 上 就 是 video 标签 的 所 有 属性 。 通 过 这 些 属性 ， 就 可 以 完成 一 个 功能 比较 完善 的 简单 视频 播 
放 器 并 将 其 嵌入 网 页 中 了 。 


3.3 Media 事件 


video 和 audio 都 继承 自 HTML5 中 的 Media， 因 此 二 者 都 有 相同 的 事件 。 控 制 视频 播放 器 、 音 
频 播 放 器 的 关键 就 在 于 如 何 操作 这 些 Media 事件 。 当 为 audio 或 者 video 标签 指定 controls 控件 时 ， 
其 实 显示 出 来 的 默认 播放 器 控件 就 是 通过 Media 事件 操作 视频 和 音频 的 播放 停止 、 音 量 大 小 的 。 
学 习 Media 事件 后 ， 就 可 以 真正 开始 开发 属于 自己 的 多 媒体 播放 器 了 。 

要 编写 自己 的 播放 器 控件 ， 首 先 需要 停止 使 用 HTMLS 默认 的 播放 器 控件 ， 即 将 controls 属性 
去 掉 。 在 刚 开 始 学 习 的 时 候 ， 为 了 随时 掌控 自 定义 的 按钮 是 否 能 够 正确 执行 Media 事件 ， 可 以 保 
留 controls 属性 ， 以 便于 观察 。 

3.3.1 HTML5 中 audio 和 video 的 方法 

所 谓 方法 ， 就 是 开发 者 可 以 通过 调用 它们 来 完成 某 些 动作 。 这 些 方法 都 属于 Media， 当 开发 者 
想 要 调用 Media 方法 时 ， 直 接 获 取 HTML 中 的 video 或 者 audio 就 可 以 正常 调用 了 。 

1. play() 方 法 

利用 play() 方 法 可 以 播放 多 媒体 文件 ， 通 过 element.play() 调 用 即 可 。 下 面 为 audio 音频 播放 器 制 
作 一 个 按钮 ， 每 当 单 击 这 个 按钮 的 时 候 就 开始 播放 音频 。 

【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 





<style type="text/css"> 
</style> 
</head> 
<body> 
<audio id="audio" controls loop="loop" src="http://dl.stream.qqmusic.qq.com/ 
C200002anWXU00r5le.m4a?vkey=IED214A0269296BA62C00682C46C1A5F37B78809127777144B0874E86DD 
8B04EEBB4379055A2DFE2442B579EE1A254E68EF76A8F6CDF2781 &guid=9953862850&fromtag=30"> 
您 的 浏览 器 不 支持 audio 标签 。 
</audio> 
<button id="play"> 开 始 播放 </button> 
<script type="text/javascript"> 
var audio = document.getElementById("audio"); 
var play = document.getElementByld("play"); 
play.onclick = function) í 
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认 的 


audio.play(); 
} 
</script> 
</body> 
</html> 


单 击 “ 开 始 播放 ”按钮 时 ， 可 以 通过 HTML5 $R 
音频 播放 器 控件 中 看 到 进度 条 已 经 开始 正常 前 |1 osa @ D — 


进 , 说 明成 功 地 通过 调用 play() 方 法 启动 了 音频 文件 的 
播放 ， 如 图 3-4 所 示 。 图 3-4 


2. pause() 方 法 
pause() 方 法 用 来 暂停 多 媒体 文件 的 播放 ， 这 里 仍然 用 音频 播放 器 做 例子 。 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet= "utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<audio id="audio" controls loop="loop" src="http://dl.stream.qqmusic.qq.com/ 


C200002anWXU00rS5le.m4a?vkey=IED214A0269296BA62C00682C46C1A5F37B78809127777144B0874E86DD 
8B04EEBB4379055A2DFE2442B579EE1A254E68EF76A8F6CDF2781&guid=9953862850&fromtag=30"> 


您 的 浏览 器 不 支持 audio 标签 。 
</audio> 
<button id="play"> 开 始 播放 </button> 
<button id="pause"> 暂 停 播放 </button> 
<script type="text/javascript"> 
var audio = document.getElementById("audio"); 
var play = document.getElementByld("play"); 
var pause = document.getElementByld("pause"); 
play.onclick = function() í 
audio.play(); 
} 
pause.onclick = function(){ 
audio.pause(); 
] 
</script> 
</body> 
</html> 
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先 通过 单 击 “ 开 始 播放 ”按钮 让 音频 文件 开始 播放 《〈 进 度 条 开始 正常 前 进 ) ， 再 单 击 “ 暂 停 


播放 ”按钮 ， 发 现 进度 条 停止 ， 说 明成 功 地 利用 pause() 方 法 停止 了 多 媒体 文件 的 播放 。 
3. load() 方 法 


调用 load0 方 法 可 以 重新 加 载 视频 文件 或 者 音频 文件 , 需要 进行 视频 文件 或 者 音频 文件 来 源 的 
更 改 时 可 以 调用 这 个 方法 。 现 在 ， 大 多 数 网 页 上 的 视频 刷新 或 者 重新 载 入 功能 都 是 使 用 load() 方 法 


制作 的 。 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<audio id="audio" controls loop="loop" src="http://dl.stream.qqmusic.qq.com/ 


C200002anWXU00r5le.m4a?vkey=1ED214A0269296BA62C00682C46C1A5F37B78809127777144B0874E86DD 


8B04EEBB4379055A2DFE2442B579EE 1 A254E68EF76A8F6CDF2781 &guid=9953862850&fromtag=30"> 
您 的 浏览 器 不 支持 audio 标签 。 
</audio> 
<button id="play"> 开 始 播放 </button> 
<button id="pause"> 暂 停 播放 </button> 
<button id="load"> 重 新 载 入 </button> 
<script type="text/javascript"> 
var audio = document.getElementById("audio"); 
var play = document.getElementByld("play"); 
var pause = document.getElementByld("pause"); 
var load = document.getElementByld("load"); 
play.onclick = function() í 
audio.play(); 
l; 
pause.onclick = function(){ 
audio.pause(); 
} 
pause.onclick = function() í 
audio.load(); 
} 
</script> 
</body> 
</html> 
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3.3.2 HTML5 中 audio 和 video 的 属性 
Media 中 的 属性 指 的 是 视频 或 者 音频 当前 某 个 状态 的 值 ， 可 以 用 来 获取 视频 或 者 音频 的 各 种 


z 
è% 


1. paused 属性 





paused 属性 用 来 返回 视频 的 当前 状态 是 否 为 停止 状态 , 如 果 是 停止 状态 就 返回 true, 如 果 是 播 
放 状 态 就 返回 false。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<audio id="audio" controls loop="loop" src="http://dl.stream.qqmusic.qq.com/ 
C200002anWXUO0OrSle.m4a?vkey=1ED214A0269296BA62C00682C46C1A5F37B78809127777144B0874E86DD 
8B04EEBB4379055A2DFE2442B579EE1A254E68EF76A8F6CDF2781&guid=9953862850&fromtag=30"> 
您 的 浏览 器 不 支持 audio 标签 。 
</audio> 
<button id="paused"> 判 断 是 否 暂停 </button> 
<script type="text/javascript"> 
var paused = document.getElementByld("paused"); 
var audio = document.getElementByld("audio"); 
paused.onclick = function() í 
alert(audio.paused) 
} 
</script> 
</body> 
</html> 





当 单 击 “ 判 断 是 否 暂停 ”按钮 时 ， 浏 览 器 会 弹出 提示 框 显 示 音 频 当 前 的 播放 状态 ， 效 果 如 图 
3-5 所 示 。 





图 3-5 
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使 用 paused 属性 可 以 做 出 按钮 来 控制 视频 的 播放 或 者 暂停 ， 而 不 再 需要 两 个 按钮 来 控制 视频 
的 播放 和 和 暂停。 通过 paused 属性 ， 获 取 视 频 当前 的 状态 后 执行 对 应 的 操作 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<audio id="audio" controls loop="loop" src="http://dl.stream.qqmusic.qq.com/ 
C200002anWXU00r5le.m4a?vkey=1ED214A0269296BA62C00682C46C1A5F37B78809127777144B0874E86DD 
8B04EEBB4379055A2DFE2442B579EE1A254E68EF76A8F6CDF2781&guid=9953862850&fromtag=30"> 
您 的 浏览 器 不 支持 audio 标签 。 
</audio> 
<button id="control"> 开 始 播放 </button> 
<button id="load"> 重 新 载 入 </button> 
<script type="text/javascript"> 
var audio = document.getElementByld("audio"); 
var control = document.getElementById("control"); 
var load = document.getElementByld("load"); 
control.onclick = function()í 
if (audio.paused) í 
control.innerHTML = "暂停 播放 "; 
audio.play(); 
yelse í 
control.innerHTML = "开始 播放 "; 
audio.pause(); 
} 
] 
load.onclick = function()í 
audio.load(); 
$ 
</script> 
</body> 
</html> 


每 当 单 击 “播放 /暂停 ”按钮 时 ， 就 会 判断 视频 文件 的 paused 状态 。 如 果 paused 为 true, 表示 
视频 是 暂停 状态 ,就 会 调用 play() 方 法 进行 视频 的 播放 ， 同 时 将 播放 /暂停 按钮 的 提示 文字 改 为 “ 暂 
停 播放 ”; WR paused 为 false， 表 示 视 频 是 播放 状态 ， 就 调用 pause() 方 法 暂停 视频 的 播放 ， 同 时 
将 “播放 /暂停 ”按钮 的 提示 文字 改 为 “开始 播放 ”。 这 样 ， 就 真正 完成 了 视频 播放 器 中 的 “开始 
播放 / 暂停 播放 ”按钮 了 。 
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2. played 属性 


played 属性 返回 的 是 视频 已 经 播放 的 长 度 ， 单 位 是 秒 。played 属性 的 返回 值 是 一 个 TimeRange 
对 象 ， 包 含 以 下 三 个 属性 值 。 

@ length: 获得 音频 /视频 中 已 播 范围 的 数量 。 

e start(index): 获得 某 个 已 播 范围 的 开始 位 置 。 

@ end(index): 获得 菜 个 已 播 范围 的 结束 位 置 。 


也 就 是 说 ， 通 过 调用 played 返回 的 TimeRange 对 象 的 这 三 个 属性 值 可 以 获取 关于 视频 或 者 音 

频 播放 的 各 种 信息 。 下 面具 体 看 一 下 返回 的 内 容 是 什么 样 的 。 
【示例 】 

<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

<style type="text/css"> 

</style> 

</head> 

<body> 

<audio id="audio" controls loop="loop" src="http://dl.stream.qqmusic.qq.com/ 

C200001NKMtqlYzWglm4a?vkey=-97890EE8BC7867127D0B02F9C46D40DCC7CCBE716E7484EBD18E14F 


0B723A8960E1A42493DC011AE1D76020607EA9CF0FD56B1BF50BE3111&amp;guid=9953862850&amp;from 
tag=30"> 








您 的 浏览 器 不 支持 audio 标签 。 
</audio> 
<p id="length"></p> 
<p id="start"></p> 
<p id="end"></p> 
<button id="btn"> 开 始 查 看 </button> 
<script type="text/javascript"> 
var btn = document.getElementById("btn"); 
var audio = document.getElementById("audio"); 
var length = document.getElementByld("length"); 
var start = document.getElementByld("start"); 
var end = document.getElementById("end"); 
function showPlayed() í 
length.innerHTML = "音频 长 度 : "+ audio.played.length; 
startinnerHTML = "开始 播放 位 置 : "+ audio.played.start(0); 
end.innerHTML = "当前 播放 位 置 " + audio.played.end(0); 
J 
btn.onclick = function) í 
setInterval(showPlayed, 1000); 
h 
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</script> 
</body> 
</html> 


效果 如 图 3-6 所 示 。 


【代码 解析 】 ”getPlayed0 方 法 可 以 获取 当前 音频 播放 器 的 played 属性 ， 获 取 其 中 的 
played.length 属性 值 、played.start(0) 属 性 值 、played.end(0) 属 性 值 ， 并 显示 在 页 面 中 定义 的 三 个 p 
标签 上 。 然 后 当 单 击 播放 音频 的 按钮 之 后 ， 单 击 “ 开 始 查看 ”按钮 ， 设 定 setInterval() 方 法 每 隔 一 
秒 执行 一 次 getPlayed() 方 法 ， 从 而 动态 地 刷新 三 个 属性 值 。 

这 就 是 进度 条 的 使 用 原理 ， 通 过 动态 获取 当前 播放 的 时 间 来 动态 地 改变 进度 条 的 进度 。 人 掌握 
了 这 个 方法 ， 就 可 以 自己 制作 视频 播放 器 控件 中 的 进度 条 了 。 
在 start 属 性 值 和 end 属 性 值 后 面 都 有 一 个 索引 值 ,这 个 值 表 示 的 是 什么 呢 ? 可 以 先 通过 chrome 
控制 台 查 看 一 下 played 属性 的 TimeRange 对 象 到 底 是 什么 样 的 〈 见 图 3-7) 。 
> var a = document.getElementById("audio"); 
undefined 
console.log(a.played); 
Y TimeRanges 
length: 1 
v _ proto__: TimeRanges 
p constructor: function TimeRanges() 
vend: function end() 


arguments: null 
caller: null 


> _ proto__: function () 
length: (...) 
P get length: function () 
v start: function start() 


I 0:25/3:03 —@ 














prieiti: 0 
ni Symbol(Symbol.toStringTag): "TimeRanges" 
EE * _proto_; Object 
undefined 
图 3-6 图 3.7 


现在 ,可 以 先 粗 略 地 观察 一 下 TimeRange 对 象 的 结构 , 接 下 来 在 Chrome 控制 台中 做 一 个 实验 。 

在 控制 台中 先 获 取 当 前 的 audio 标签 : 

var a = document.getElementByld("audio"); 

然后 ， 多 次 进行 播放 ， 每 次 都 将 进度 条 移动 到 一 个 位 置 ， 之 后 打印 一 下 played 属性 。 每 移动 
一 次 ，played 属性 对 应 的 TimeRange 对 象 的 length 属性 的 值 都 会 加 一 。 

其 实 ， 这 里 的 时 间 范 围 有 多 个 ， 每 当 重 新 规定 一 个 开始 播放 的 位 置 时 ，TimeRange 对 象 就 会 
多 一 组 值 ，length 属性 就 表示 这 种 值 有 多 少 组 ， 每 组 都 有 对 应 的 start (开始 位 置 ) 和 end CARNE 
置 ) 。 所 以 ， 当 调用 start 和 end 时 ， 要 加 上 对 应 的 索引 ， 表 示 需 要 获取 的 是 第 几 段 的 TimeRange。 

3. currentTime 属性 
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currentTime 属性 设置 或 返回 音频 /视频 播放 的 当前 位 置 〈 以 秒 计 ) 。 可 以 用 currentTime 获取 
当前 播放 的 位 置 是 多 少 秒 ， 也 可 以 使 用 这 个 属性 设置 播放 的 位 置 。 当 用 currentTime 属性 设置 播放 
的 位 置 时 会 直接 跳 转 到 对 应 的 播放 位 置 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<audio id="audio" controls loop="loop" src="http://cc.stream.qqmusic.qq.com/ 
C200000QwTVo0YHdcP.m4a?vkey=8C26FE76A3F11F2B2B20A31F87E39BBED83A7B41B58A463C6E4418A7 
D50E1F08156F7B2770A8EBOFF9CB6D3C65027D799B667B462 1 DD3 165&guid=9953862850&fromtag=30"> 
您 的 浏览 器 不 支持 audio 标签 。 
</audio> 
<p id="currentTime"></p> 
<input id="time" placeholder=" 输 入 跳 转 到 的 时 间 "/> 
<button id="changeTime"> 改 变 时 间 到 </button> 
<script type="text/javascript"> 
var audio = document.getElementById("audio"); 
var text = document.getElementByld("currentTime"); 
var change = document.getElementByld("changeTime"); 
change.onclick = function(){ 





var time = document.getElementByld("time").value; 
audio.currentTime = time; 
J 
window.onload = function() í 
var show = setlnterval(function() í 
text.innerHTML = "当前 位 置 : " + audio.currentTime; 





}, 1000); 
} 
</script> 
</body> 
</html> 
上 面 的 小 项 目 主要 完成 了 两 个 功能 。 首 先 ， 使 用 setInterval 方法 和 currentTime 属性 动态 改变 





目前 播放 器 播放 的 位 置 , 单位 为 秒 。 接 下 来 , 制作 一 个 跳 转 功能 , 可 以 任意 输入 想 要 跳 转 到 的 秒 数 ， 
然后 单 击 按钮 触发 对 应 的 方法 (该 方法 设置 了 currentTime 属性 的 值 ， 从 而 实现 了 跳 转 功能 ) ， 如 
图 3-8 所 示 。 
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II 4:02 / 4:08 — e 中 — 


当前 位 置 : 242.032424 


100 改变 时 间 到 





图 3-8 
4. muted 属性 


muted 属性 设置 或 返回 音频 /视频 是 否 应 该 被 静音 。 播 放 器 空间 中 ， 可 以 使 用 muted 属性 来 实 
现 静音 效果 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<audio id="audio" controls loop="loop" src="http://cc.stream.qqmusic.qq.com/ 
C200000QwTVo0YHdcP.m4a?vkey=8C26FE76A3F11IF2B2B20A31F87E39BBED83A7B41B58A463C6E4418A7 
D50E1F08156F7B2770A8EBOFF9CB6D3C65027D799B667B4621DD3 165&guid=9953862850&fromtag=30"> 
您 的 浏览 器 不 支持 audio 标签 。 
</audio> 
<button id="muted"> 开 始 静 音 </button> 
<script type="text/javascript"> 





var audio = document.getElementByld("audio"); 
var muted = document.getElementByld("muted"); 
muted.onclick = function()í 
if(audio.muted == false){ 
audio.muted = true; 
muted.innerHTML = "打开 声音 "; 
}else{ 
audio.muted = false; 
muted.innerHTML = "开始 静音 "; 


] 
</script> 
</body> 
</html> 


当 单 击 静音 按钮 时 ， 播 放 器 的 声音 就 消失 了 ; 再 次 单 击 按钮 时 ， 播 放 器 的 声音 又 恢复 了 。 通 


32 | HTML5+jQuery Mobile 移动 应 用 开发 





过 audio.muted 属性 获取 当前 的 状态 是 否 为 静音 , 再 根据 判断 结果 修改 audio.muted 属性 进行 静音 的 
调整 。 


5. volume 属性 


volume 属性 设置 或 返回 音频 /视频 的 当前 音量 。volume 属性 很 重要 ,视频 播放 器 或 者 音频 播放 
器 的 音量 大 小 调节 在 很 大 程度 上 都 靠 这 个 属性 。 volume 的 值 可 以 是 0.0~1.0 之 间 的 任何 数值 .其 中 ， 
0.0 表示 静音 ，1.0 表示 最 大 音量 。 也 可 以 用 百分数 进行 音量 的 设置 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<audio id="audio" controls loop="loop" src="http://cc.stream.qqmusic.qq.com/ 
C200000QwTVo0YHdcP.m4a?vkey=8C26FE76A3F11F2B2B20A31F87E39BBED83A7B41B58A463C6E4418A7 
D50E1F08156F7B2770A8EBOFF9CB6D3C65027D799B667B462 1 DD3 165&guid=9953862850&fromtag=30"> 
您 的 浏览 器 不 支持 audio 标签 。 
</audio> 
<button id="volume"> 调 节 声音 </button> 
<input type="text" placeholder=" 输 入 需要 的 音量 (0-1 之 间 )" id="num"> 
<script type="text/javascript"> 
var audio = document.getElementById("audio"); 
var volume = document.getElementByld("volume"); 
var num = document.getElementByld("num"); 
volume.onclick = function()í 
var num = document.getElementById("num").value; 
audio.volume = num; 











J 
</script> 

</body> 

</html> 

试 着 在 输入 框 中 输入 一 个 0~1 的 值 ， 单 击 调节 声音 
按钮 ， 会 发 现 声音 成 功 变化 。 这 个 变化 也 可 以 通过 | Ú o 一 9 由 — 
HTML5 默认 的 播放 器 控件 中 的 声音 控件 看 出 来 ， 如 图 O 12 
3-9 所 示 。 图 3-9 





当 输入 一 个 大 于 1 的 数值 时 ， 打 开 Chrome 浏览 
的 控制 台 ， 就 会 发 现 控制 台 出 现 了 报错 ， 内 容 如 下 : 








© > Uncaught DOMException: Failed to set the 'volume' property on 'HTMLMediaElement': The 
volume provided (1.2) is outside the range [0, 1].(.J) 





也 就 是 说 ， 使 用 volume 属性 只 能 设置 声音 从 0%~100%， 而 不 能 设置 超出 这 个 范围 的 音量 大 
小 值 。 
可 以 配合 HTML, 中 input 标签 中 的 range 类 型 标签 做 一 个 简易 的 音量 控制 控件 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<audio id="audio" controls loop="loop" sre="http://cc.stream.qqmusic.qq.com/ 
C200000QwTVo0YHdcP.m4a?vkey=8C26FE76A3F11F2B2B20A31F87E39BBED83A7B41B58A463C6F4418A7 
D50E1F08156F7B2770A8EBOFF9CB6D3C65027D799B667B4621DD3165&guid=9953862850&fromtag=30"> 
您 的 浏览 器 不 支持 audio 标签 。 
</audio> 
<input type="range" max="1" min="0" step="0.1" id="volume"> 
<script type="text/javascript"> 
var audio = document.getElementById("audio"); 
var volume = document.getElementById("volume"); 
volume.onchange = function(e){ 
audio.volume = e.target.value; 
ji 
</script> 
</body> 
</html> 


这 里 使 用 type 为 range 的 input 标签 ， 定 义 了 最 
大 值 、 最 小 值 、 每 次 移动 变化 量 等 属性 。 同 时 ， 使 用 
JavaScript 中 的 onchange 方法 , 每 当 input 标签 输入 值 
发 生变 化 时 就 改变 音频 播放 器 的 volume 属性 , 从 而 完 
成 声音 控件 的 制作 ， 如 图 3-10 所 示 。 


6. duration 属性 


duration 属性 返回 当前 音频 /视频 的 长 度 ， 以 秒 计 。 如 果 没 有 传 入 视频 或 者 音频 ，duration 属性 
返回 的 值 为 NaN。 使 用 这 个 属性 值 可 以 做 很 多 事情 ， 例 如 ， 下 面 的 代码 实时 返回 目前 播放 视频 的 
长 度 。 


HI 1:5174:08 ”一 一 人 4) 
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【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<audio id="audio" controls loop="loop" src="http://cc.stream.qqmusic.qq.com/ 
C200000QwTVo0YHdcP.m4a?vkey=8C26FE76A3F11F2B2B20A31F87E39BBED83A7B41B58A463C6E4418A7 
D50E1F08156F7B2770A8EBOFF9CB6D3C65027D799B667B4621DD3 165&guid=9953862850&fromtag=30"> 
您 的 浏览 器 不 支持 audio 标签 。 
</audio> 
<p id="record"></p> 
<script type="text/javascript"> 
var audio = document.getElementByld("audio"); 
var record = document.getElementByld("record"); 
window.onload = function(){ 
var change = setInterval(function(){ 
record.innerHTML = "已 播放 长 度 : "+ ((audio.currentTime * 100) / audio.duration).toFixed(2) + "%"; 
1.1000) 
1 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 ， 利 用 audio.currentTime 属性 和 audio.duration 属性 动态 显示 视频 目前 为 止 播 
放 的 时 间 百 分 比 ， 这 种 比值 可 以 制作 出 一 个 视频 播放 器 或 者 音频 播放 器 的 时 间 轴 控件 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

<style type="text/css"> 

</style> 

</head> 

<body> 

<audio id="audio" controls loop="loop" src="http://cc.stream.qqmusic.qq.com/ 

C200000QwTVo0YHdcP.m4a?vkey=8C26FE76A3F11F2B2B20A31F87E39BBED83A7B41B58A463C6E4418A7 
D50E1F08156F7B2770A8EBOFF9CB6D3C65027D799B667B4621DD3165&guid=9953862850&fromtag=30"> 
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您 的 浏览 器 不 支持 audio 标签 。 


</audio> 
<p id="record"></p> 


<input id="show" type="range" min="0" max="1" step="0.0001" /> 
<script type="text/javascript"> 


var audio = documi 
var record = docum 


ent.getElementByld("audio"); 
ent.getElementByld("record"); 


var show = document.getElementByld("show"); 
window.onload = function()í 
var change = setlnterval(function() í 
var rate = ((audio.currentTime) / audio.duration).toFixed(4); 
record.innerHTML = "已 播放 长 度 : "+ (rate * 100) + "%"; 
show.value = rate; 


}, 1000) 
I 
</script> 
</body> 
</html> 


如 图 3-11 所 示 。 


上 面 的 代码 继续 利用 类 型 为 range 的 input 标签 来 显示 视 


频 的 播放 范围 。 将 音频 的 
文件 已 经 播放 了 多 少 。 将 


值 设 置 成 0， 就 可 以 用 这 个 时 间 轴 控件 来 显示 所 有 多 媒体 文件 


的 播放 情况 了 。 


Hl 005 /408 © 


总 长 度 看 作 1， 用 百分比 来 表明 音频 “| 播放 长 度 :ss 
input 标签 的 max 值 设 置 为 1、min | ° 


图 3-11 


7. playbackRate 属性 
上 面 的 各 种 属性 都 是 HTMLS 多 媒体 播放 器 为 了 达到 Flash 等 播放 器 高 性 能 的 要 求 而 设计 的 ， 


但 是 playbackRate 所 具有 
视频 或 者 音频 的 播放 速率 
倒退 显示 ! 
playbackRate 属性 的 
e° 10: 正常 速度 。 
0.5: 半 速 (更 慢 
2.0: 倍速 (更 快 


【示例 】 
<!DOCTYPE> 
<html> 
<head> 


的 功能 是 Flash 等 传统 播放 器 所 没有 的 。 这 个 属性 可 以 设置 或 者 返 





属性 值 可 以 是 如 下 内 容 。 


). 
). 


-1.0: 向 后 ， 正 常 速 度 。 
-0.5: 向 后 ， 半 速 。 





m 














当前 


， 可 以 让 视频 或 者 音频 以 慢 一 些 或 者 快 一 些 的 速率 显示 , 甚至 可 以 让 视频 
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<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<audio id="audio" controls loop="loop" src="http://cc.stream.qqmusic.qq.com/ 
C200000QwTVo0YHdcPm4a?vkey=8C26FE76A3F11F2B2B20A31F87E39BBED83A7B41B58A463C6E4418A7 
D50E1FO08156F7B2770A8EBOFF9CB6D3C65027D799B667B4621DD3165&guid=9953862850&fromtag=30"> 
您 的 浏览 器 不 支持 audio 标签 。 
</audio> 
<input id="playbackRate" type="range" min="-1" max="2" step="0.5" /> 
<script type="text/javascript"> 
var audio = document.getElementByld("audio"); 
var playbackRate = document.getElementByld("playbackRate"); 
playbackRate.onchange = function(e) { 
audio.playbackRate = e.target.value; 
console.log(audio.playbackRate); 
l: 
</script> 
</body> 
</html> 


每 当 改 变 倍速 的 input 值 时 ， 就 会 改变 倍速 ， 从 而 影响 音频 的 播放 速度 。 可 以 在 浏览 器 中 自己 
尝试 一 下 ， 看 看 最 后 会 有 什么 样 的 奇幻 效果 。 


3.3.3 ”HTML5 中 audio 和 video 的 事件 


和 属性 相对 应 的 ，Media 对 象 还 有 onclick, onchange 等 事件 句柄 ， 会 在 特定 的 场景 下 触发 ， 
具体 内 容 如 表 3-2 所 示 。 


表 3-2 audio 和 video 事件 列表 









































= 件 性 质 | 说 M 

oncanplay script 当 文 件 就 绪 可 以 开始 播放 时 运行 的 脚本 《缓冲 已 足够 开始 时 ) 
oncanplaythrough Script 当 媒 介 能 够 无 须 因 缓 冲 而 停止 即 可 播放 至 结尾 时 运行 的 脚本 
ondurationchange Script 当 媒 介 长 度 改变 时 运行 的 脚本 

onemptied script 当 发 生 故 障 并 且 文 件 突然 不 可 用 时 运行 的 脚本 《比如 连接 意外 断 开 时 ) 
onended script 当 媒 介 已 到 达 结尾 时 运行 的 脚本 《可 发 送 类 似 “ 感 谢 观看 ”之 类 的 消息 ) 
onerror Script 当 在 文件 加 载 期 间 发 生 错误 时 运行 的 脚本 

onloadeddata script 当 媒 介 数 据 已 加 载 时 运行 的 脚本 

onloadedmetadata Script 当 元 数据 〈 比 如 分 辩 率 和 时 长 ) 被 加 载 时 运行 的 脚本 

onloadstart Script 在 文件 开始 加 载 且 未 实际 加 载 任何 数据 前 运行 的 脚本 

onpause script 当 媒 介 被 用 户 或 程序 暂停 时 运行 的 脚本 

onplay Script 当 媒 介 已 就 绪 可 以 开始 播放 时 运行 的 脚本 

onplaying script 当 媒 介 已 开始 播放 时 运行 的 脚本 
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( 续 表 ) 
事件 性 质 说 明 
onprogress Script 当 浏 览 器 正在 获取 媒介 数据 时 运行 的 脚本 
onratechange Script 每 当 回放 速率 改变 时 运行 的 脚本 《比如 用 户 切换 到 慢 动作 或 快 进 模式 ) 
onreadystatechange | script 每 当 就 绪 状态 改变 时 运行 的 脚本 〈 就 绪 状 态 监测 媒介 数据 的 状态 
onseeked Script 当 seeking 属性 设置 为 false《〈 指 示 定 位 已 结束 ) 时 运行 的 脚本 
onseeking Script 当 seeking 属性 设置 为 tue〈 指 示 定 位 是 活动 的 ) 时 运行 的 脚本 
onstalled Script 在 浏览 器 不 论 何 种 原因 未 能 取 回 媒介 数据 时 运行 的 脚本 
onsuspend Script 在 媒介 数据 完全 加 载 之 前 不 论 何 种 原因 终止 取 回 媒介 数据 时 运行 的 脚本 
ontimeupdate Script 当 播放 位 置 改变 时 《比如 当 用 户 快 进 到 媒介 中 一 个 不 同 的 位 置 时 ) 运行 
的 脚本 
onvolumechange Script 每 当 音量 改变 〈 包 括 将 音量 设置 为 静音 ) 时 运行 的 脚本 
onwaiting Script 当 媒 介 已 停止 播放 但 打算 继续 播放 时 〈 比 如 当 媒 介 和 暂停 以 缓冲 更 多 数据 ) 
运行 脚本 
运用 本 童 学 到 的 知识 和 技巧 ， 读 者 完全 可 以 制作 一 个 自己 的 视频 或 者 音频 播放 器 。 只 要 加 上 


合适 的 JavaScript 控制 代码 以 及 一 些 CSS 样式 文件 , 就 可 以 开发 自己 的 HTMLS5 播放 器 了 。 在 移动 
端 HTML5 应 用 的 开发 中 ， 再 也 不 用 担心 无 法 使 用 播放 器 组 件 了 。 





本 章 内 容 要 点 : 

* 本 地 存储 

Æ localStorage 对 象 和 sessionStorage 对 象 
3⁄ storage 对 象 及 事件 

* 应 用 程序 缓冲 


为 什么 说 HTML5 让 移动 Web 开发 成 为 可 能 ? 除了 HTML 中 提供 的 丰富 多 彩 的 标准 和 功能 
外 ， 存储 是 最 重要 的 特性 之 一 。 开 发 者 使 用 PC 端 浏览 网 页 时 ， 凭 借 电 脑 设备 的 自身 特性 可 以 利用 
高 速 的 网 络 环境 随时 加 载 资源 。 手 机 就 不 一 样 了 ， 由 于 手机 自身 特性 的 限制 ,如 果 每 次 打开 应 用 都 
要 加 载 一 系列 的 数据 和 文件 ， 就 会 造成 很 多 负面 影响 。 比 如 ， 由 于 手机 网 速 限制 ， 每 次 单 击 资源 加 
载 资源 浪费 很 长 时 间 ; 又 如 ， 由 于 手机 性 能 限制 ， 加 载 内 容 出 现 问 题 。 由 于 原生 的 应 用 是 可 以 将 数 
据 存储 到 本 地 的 ， 因 此 这 些 引 用 拥有 很 好 的 用 户 体验 。Web 由 于 自身 的 限制 是 不 可 能 将 数据 存储 
到 本 地 的 ， 因 此 造成 了 上 面 所 说 的 每 次 都 要 进行 加 载 的 现象 。 

HTML5 推出 了 一 系列 帮助 本 地 存储 的 功能 和 规范 ， 比 如 本 地 存储 、 离 线 缓存 等 。 这 些 规范 很 
好 地 解决 了 Web 在 移动 设备 上 性 能 的 瓶颈 ， 也 让 移动 端的 Web 应 用 开发 成 为 可 能 。 可 以 说 ， 本 章 
将 要 介绍 的 和 存储 相关 的 知识 是 移动 端 Web 开发 的 必要 条 件 。 没 有 存储 的 支持 ， 移 动 端 Web 开发 
是 不 可 能 的 。 





4.1 本 地 存储 


本 地 存储 是 HTML5 出 现 的 新 技术 ， 这 个 技术 的 出 现 使 得 移动 Web 的 开发 成 为 可 能 。 我 们 知 
道 ， 要 想 打造 一 个 高 性 能 的 移动 应 用 ， 速 度 是 非常 关键 的 ， 在 HTML 5 之 前 ， 只 有 cookie 能 够 存 
储 数据 ， 大 小 只 有 4KB， 这 严重 限制 了 应 用 文件 的 存储 ， 导 致 Web 开发 的 移动 应 用 程序 需要 较 长 
的 加 载 时 间 ， 有 了 本 地 存储 ，Web 移动 应 用 就 能 够 更 接近 原生 了 。 

HTML5 提供 了 两 种 在 客户 端 存储 数据 的 新 方法 : 

e localStorage 没有 时 间 限 制 的 数据 存储 。 

e SessionStorage 针对 一 个 session 的 数据 存储 。 


如 何 理解 这 两 者 之 间 的 区 别 呢 ? localStorage 是 没有 时 间 限 制 的 。 也 就 是 说 ， 当 设置 了 客户 端 
存储 一 些 数据 时 ， 使 用 localStorage 会 让 这 些 数据 永久 保存 ， 除 非 手动 进行 删除 。sessionStroage 与 
session 有 关 。 什 么 是 session 呢 ? session 在 网 站 中 很 常见 ， 表 示 的 是 一 次 会 话 。 会 话 是 一 种 持久 网 
络 协 议 ， 在 用 户 或 用 户 代理 ) 端 和 服务 器 端 之 间 创 建 关 联 ， 从 而 起 到 交换 数据 包 的 作用 。session 
在 网 络 协议 中 是 非常 重要 的 部 分 , 也 就 是 说 , 使 用 sessionStorage 存储 的 数据 只 在 一 次 会 话 中 保存 ， 
会 话 结束 后 就 会 自动 删除 。 


4.2 localStorage 对 象 


接 下 来 了 解 一 下 如 何 使 用 localStorage 进行 本 地 存储 。 

localStorgae 是 一 个 Windows 对 象 ， 可 以 通过 window.localStorage 调用 ， 同 时 也 可 以 直接 调用 
localStorage。localStorage 是 一 个 对 象 ， 可 以 在 这 个 对 象 上 挂 载 各 种 各 样 的 数据 。 

首先 ， 做 一 下 必要 的 判断 ， 看 看 浏览 器 是 否 支 持 localStorage， 不 支持 localStorage 的 浏览 器 执 
行 代 码 时 会 出 错 ， 代 码 如 下 : 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<button id="btn"> 测 试 </button> 
<script type="text/javascript"> 
var btn = document.getElementById("btn"); 
btn.onclick = function()í 
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这 window.localStorage){ 
alert('This browser supports localStorage'); 
}else{ 
alert('This browser does NOT supportlocalStorage'); 
J 
} 
</script> 
</body> 
</html> 


打开 页 面 ， 单 击 按钮 ， 如 果 提 示 “This browser supports localStorage”， 就 说 明 浏览 器 支持 
localStorage， 如 图 4-1 所 示 。 





此 网 页 显示 : 
This browser supports localStorage 


禁止 此 页 再 显示 对 话 框 。 








图 4-1 
测试 了 浏览 器 支持 localStorage， 就 可 以 开始 使 用 localStorage T o 
42.4 通过 localStorage 设置 存储 元 素 


要 设置 localStorage 存储 的 内 容 ， 最 简单 的 方法 就 是 直接 为 localStorage 绑 定 变量 。 因 为 上 文 
已 经 讲 过 ，localStorage 就 是 Window 对 象 的 一 个 子 对 象 ， 所 以 直接 在 它 上 面 挂 载 元 素 是 JavaScript 
允许 的 。 

【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" > 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

<style type="text/css"> 

</style> 

</head> 

<body> 
<input type="text" id="data"> 
<button id="btn"> 存 储 数据 </button> 
<script type="text/javascript"> 





var btn = document.getElementByld("btn"); 
btn.onclick = function() í 
var data = document.getElementByld(data).value; 
if(window.localStorage)í 
console.log('This browser supports localStorage'); 
localStorage.data = data; 


jelsef 
alert(This browser does NOT supportlocalStorage'); 
ji 
ji 
</script> 
</body> 
</html> 


上 面 的 代码 定义 了 一 个 输入 框 ， 用 户 在 输入 框 内 输入 要 保存 的 内 容 ， 当 单 击 存储 按钮 后 就 会 
将 内 容 存储 到 localStorage 对 象 上 。 那 么 如 何 才能 看 到 存储 的 数据 在 哪里 呢 ? 
在 Chrome 浏览 器 控制 台中 ， 打 开 Application 选项 ， 在 左 侧 的 菜单 中 有 一 个 Local Storage 的 
选项 ， 点 开 就 会 发 现 已 经 存储 好 数据 ， 如 图 4-2 所 示 。 
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图 42 

从 这 个 存储 列表 还 可 以 看 出 ， 数 据 是 按照 键 值 对 的 形式 存储 的 。 所 谓 键 值 对 ， 就 是 key-value 
的 形式 ， 一 个 属性 对 应 一 个 属性 值 。 这 里 面 用 代码 localStorage.data=" 测 试 数据 "为 localStorage 指 
定 了 一 个 值 为 “测试 数据 ”的 data。 

那么 在 这 里 面 存储 的 内 容 关 闭 网 页 后 还 会 存在 么 ?可 以 使 用 上 面 介绍 的 方法 关闭 网 页 ， 然 后 
打开 ， 到 同样 的 地 方 看 一 下 ， 如 图 4-3 所 示 。 

可 以 发 现 ， 这 些 内 容 还 是 存在 的 。 也 就 是 说 ， 在 之 前 使 用 localStorage 保存 内 容 之 后 ， 无 论 是 
刷新 网 页 还 是 关闭 浏览 器 ， 都 不 会 清除 之 前 的 记录 。 

那么 这 些 内 容 会 保存 多 久 呢 ? 正如 刚才 所 说 ， 使 用 localStorgae 保存 的 内 容 ， 只 要 没有 被 手动 
删除 ， 就 会 永久 保存 在 本 地 。 现 在 这 种 技术 非常 常见 ， 可 以 随便 打开 一 个 页 面 ， 使 用 上 面 的 方法 查 
看 这 个 网 页 在 localStorage 中 保存 了 什么 数据 。 
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4-3 
其 实 ， 直 接 挂 载 这 种 方法 是 不 规范 的 。 在 HTML5 中 ， 规 范 定义 了 setltem 方法 来 进行 本 地 存 
储 。setItem() 方 法 需要 传 入 两 个 参数 ， 第 一 个 参数 是 key， 第 二 个 参数 是 value， 也 就 是 之 前 所 说 的 
键 值 对 。 键 值 对 在 JavaScript 中 是 非常 常用 的 一 种 数据 格式 ， 使 用 起 来 也 非常 方便 。 下 面 举 例 说 明 
如 何 使 用 setItem 方法 存储 数据 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<input type="text" id="data"> 
<button id="btn"> 存 储 数据 </button> 
<script type="text/javascript"> 
var btn = document.getElementByld("btn"); 
btn.onclick = function() í 
var data = document.getElementByld("data").value; 


if(window.localStorage){ 
console.log('This browser supports localStorage'); 
localStorage.setltem('data', data); 

jelsef 
alert(This browser does NOT supportlocalStorage'); 

Í 

] 
</script> 


第 4 章 F 储 | 43 





这 里 使 用 setItem() 方 法 再 次 存储 了 一 个 data 数据 ， 查 看 Application， 如 图 4-4 所 示 。 
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图 44 


我 们 发 现 了 一 个 问题 一 之 前 存储 的 data 数据 不 见 了 ， 这 是 因为 后 来 存储 的 data 数据 覆盖 了 
之 前 存储 的 data 数据 ， 即 同名 的 存储 会 覆盖 之 前 的 内 容 。 


4.2.2 ”获取 数据 


使 用 localStorage 存储 数据 的 目的 是 获取 数据 ,在 localStorage 中 , 可 以 使 用 规范 提供 的 getItem 
方法 来 获取 数据 。getItem 方法 只 需要 传 入 一 个 参数 ， 将 键 值 对 中 的 key 传 入 ， 返 回 对 应 的 value 
值 。 

【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<button id="btn"> 获 取 数 据 </button> 
<p id="result"></p> 
<script type="text/javascript"> 
var btn = document.getElementByld("btn"); 
var result = document.getElementByld("result"); 
btn.onclick = function() í 
if(window.localStorage)í 
console.log('This browser supports localStorage'); 
var data = localStorage.getltem(" data"); 
result.innerHTML = data; 
jelse{ 
alert(This browser does NOT supportlocalStorage'); 
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H 
</script> 
</body> 
</html> 


需要 获取 刚才 存储 的 数据 时 ， 单 击 “ 获 取 数 据 ” 按 钮 ， 就 会 发 现 p 标签 部 分 出 现 了 存储 的 数 
据 内 容 ， 如 图 4-5 所 示 。 








获取 由 所 RH Bemens Consde Souces Newok Tmeine Prolles Applcation Seculy Audis x 
@ w p v Preserve log 
aaao 
This browser supports tocatStorage localStorage-get.html:17 
图 4-5 


现在 可 以 明白 本 地 存储 的 使 用 目的 和 方式 了 。 有 的 时 候 需要 将 数据 保存 在 PC 或 者 移动 端的 本 
地 ， 以 供 日 后 继续 使 用 。 可 以 在 下 载 应 用 时 使 用 setItem 将 各 种 数据 按照 键 值 对 的 形式 保存 起 来 ， 
然后 在 以 后 每 次 开启 应 用 的 时 候 直 接 使 用 getItem 获取 之 前 本 地 存储 的 数据 (因为 localStorgae ff 
储 的 数据 永远 不 会 失效 ), 用 来 泻 染 界面 。 这 种 模式 可 以 避免 开发 者 每 次 都 从 服务 器 下 载 大 量 数据 ， 
从 本 地 读 取 数 据 大 大 加 快 了 速度 ， 提 高 了 Web 应 用 性 能 。 


423 删除 数据 


在 localStorage 中 ， 可 以 使 用 removeItem() 方 法 删除 一 个 存储 的 本 地 数据 ， 因 为 最 开始 传递 进 
去 的 是 key-value 键 值 对 ， 所 以 删除 的 时 候 只 要 指定 要 删除 的 key 值 就 可 以 了 。 这 里 可 以 为 
removeltem 传 入 一 个 key 值 ， 删 除 在 localStorage 中 存储 的 对 应 数据 。 举 例如 下 : 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<button id="add"> 添 加 数据 </button> 
<button id="btn"> 删 除数 据 </button> 
<script type="text/javascript"> 
var btn = document.getElementByld("btn"); 
var add = document.getElementByld("add"); 
add.onclick = function() í 
这 window.localStorage){ 
console.log('This browser supports localStorage'); 





localStorage.name = "Martin"; 
}else{ 
alert(This browser does NOT supportlocalStorage'); 
$ 
] 
btn.onclick = function()í 
这 window.localStorage){ 
console.log('This browser supports localStorage'); 
localStorage.removeltem("name"); 
jelsef 
alert(This browser does NOT supportlocalStorage'); 
J, 
} 
</script> 
</body> 
</html> 


打开 浏览 器 ， 每 当 单 击 “ 添 加 数据 ”按钮 时 就 会 添加 一 个 key 为 name 的 数据 ， 每 当 单 击 “ 删 
除数 据 ” 按 钮 时 就 会 将 之 前 添加 的 按钮 删除 。 这 些 变化 都 可 以 在 刷新 页 面 后 ， 在 chrome 控制 台 
Application 中 的 Local Storage 中 查看 到 。 这 样 就 可 以 手动 删除 LocalStorage 中 存储 的 数据 了 。 


424 ”清除 数据 


清除 数据 和 上 面 的 删除 数据 有 所 不 同 , 指 的 是 删除 localStorage 中 的 所 有 数据 。 在 localStorage 
中 ,可 以 使 用 clear0 方 法 进行 删除 。clear0 方 法 不 需要 传 入 任何 参数 ,会 将 localStorage 中 存储 的 所 
有 数据 全 部 清除 ， 下 面 进行 clear() 方 法 的 尝试 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<button id="add"> 添 加 数据 </button> 
<button id="btn"> 清 除数 据 </button> 
<script type="text/javascript"> 
var btn = document.getElementById("btn"); 
var add = document.getElementByld("add"); 
add.onclick = function() í 
if(window.localStorage) í 
console.log('This browser supports localStorage'); 
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localStorage.name = "Martin"; 
localStorage.age = "30"; 
localStorage.sex = "Male"; 
jelsef 
alert(This browser does NOT supportlocalStorage'); 


J: 
btn.onclick = function() í 
if(window.localStorage){ 
console.log('This browser supports localStorage'); 
localStorage.clear(); 
yelse{ 
alert('This browser does NOT supportlocalStorage'); 


y 
</script> 
</body> 
</html> 


单 击 添加 数据 按钮 ， 会 在 localStorage 中 存储 三 条 数据 ， 分 别 是 name, age 以 及 sex。 单 击 清 
除 按钮 后 ， 会 调用 localStorage 中 的 clear0 方 法 ， 再 次 查看 Application 中 的 localStorage 方法 ， 会 
发 现 之 前 添加 的 数据 全 部 被 清空 了 。 

以 上 就 是 localStorage 提供 的 全 部 方法 ， 有 了 这 些 方法 ， 就 可 以 任意 操作 localStorage 数据 了 。 
下 面 来 看 一 个 应 用 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
key 值 : <input type="text" name="key" id="key"> 
value 值 : <input type="text" name="value" id="value"> 
<button id="add"> 添 加 数据 </button> 
<button id="remove"> 删 除数 据 </button> 
<button id="btn"> 清 除 全 部 数据 </button> 
<button id="get"> 获 取 数 据 </button> 
<p id="show"></p> 
<script type="text/javascript"> 
var btn = document.getElementByld("btn"); 
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var add = document.getElementByld("add"); 
var remove = document.getElementByld("remove"); 
var get = document.getElementByld("get"); 
var show = document.getElementByld("show"); 
add.onclick = function()í 
var key = document.getElementByld("key").value; 
var value = document.getElementByld("value").value; 
这 window.localStorage){ 
console.log('This browser supports localStorage'); 
localStorage.setltem(key, value); 
j}elsef 
alert(This browser does NOT supportlocalStorage'); 


k 
get.onclick = function(){ 
var key = document.getElementByld("key").value; 
这 window.localStorage){f 
console.log('This browser supports localStorage'); 
var result = localStorage.getltem(key); 
show.innerHTML = result; 
yelse{ 
alert('This browser does NOT supportlocalStorage'); 


] 
remove.onclick = function()í 
var key = document.getElementByld("key").value; 
if(window.localStorage){ 
console.log('This browser supports localStorage'); 
localStorage.remove(key); 
}else{ 
alert(This browser does NOT supportlocalStorage'); 


] 
btn.onclick = function() í 
if(window.localStorage){ 
console.log('This browser supports localStorage'); 
localStorage.clear(); 
}else{ 
alert('This browser does NOT supportlocalStorage'); 
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这 个 例子 涵盖 了 所 有 localStorage 中 可 用 的 功能 。 读 者 可 以 自己 添加 键 值 对 ， 指 定 各 自 的 值 ， 
并 存储 在 localStorage 中 。 同 时 ， 还 可 以 指定 想 删除 或 者 获得 哪个 localStorage 中 存储 的 值 ， 也 可 以 
一 次 直接 清空 所 有 localStorage 中 的 数据 。 


4.3 sessionStorage 


SessionStorage 中 的 方法 和 localStorage 中 的 方法 类 似 ， 但 是 sessionStorage 中 存储 的 数据 只 在 
一 个 会 话 中 存在 。 下 面 给 出 一 个 判断 浏览 器 是 否 支持 sessionStorage 的 示例 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<button id="btn"> 测 试 </button> 
<script type="text/javascript"> 
var btn = document.getElementById("btn"); 
btn.onclick = function()í 


这 window.sessionStorage)f{ 
alert(This browser supports sessionStorage'); 
elsef 
alert(This browser does NOT support sessionStorage'); 
j 
li 
</script> 
</body> 
</html> 


如 果 浏 览 器 弹出 对 话 框 显示 支持 sessionStorage， 就 说 明 浏 览 器 是 支持 sessionStorage 方法 的 。 
434 存储 数据 


sessionStorage 中 使 用 setItem() 方 法 存储 数据 ， 与 localStorage 相同 。 
【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" > 
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<meta name="viewport" content= "width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<input type="text" id="data"> 
<button id="btn"> 存 储 数据 </button> 
<script type="text/javascript"> 
var btn = document.getElementByld("btn"); 
btn.onclick = function() í 
var data = document.getElementByld("data").value; 
if(window.sessionStorage)í 
console.log('This browser supports sessionStorage'); 
SessionStorage.setltem('data', data); 


yelse{ 
alert('This browser does NOT support sessionStorage'); 


J 
</script> 
</body> 
</html> 


打开 浏览 器 ， 存 储 一 个 数据 尝试 一 下 。 在 Application 选项 卡 中 ， 单 击 sessionStorage 就 可 以 看 
到 存储 的 数据 了 ， 如 图 4-6 所 示 。 





[N] Elements Console Sources Network Timeline Profiles Application Security Audits 
Key Value 
Application pe — 
Ë Manilest 
X: Service Workers 
Ë clear storage 
Storage 


Y EE Local Storage 





Ë Web SQL 
>@ Cookies 


Cache 








图 4-6 
刷新 网 页 再 进行 查看 ， 就 会 发 现 sessionStorage 中 仍然 存在 数据 。 当 将 网 页 关闭 再 打开 的 时 候 
查看 sessionStorage 的 内 容 ， 就 会 如 图 4-7 所 示 。 
我 们 会 发 现 sessionStorage 中 存储 的 数据 不 见 了 , 这 就 是 sessionStorage 的 特点 。sessionStorage 
中 存储 的 数据 仅 在 当前 对 话 内 存在 ， 在 关闭 浏览 器 之 后 就 会 自动 清除 ， 通 过 使 用 sessionStorage 可 
以 处 理 一 些 仅 需要 在 当前 会 话 中 临时 存储 的 数据 。 
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Elements Console Sources Network Timeine Profiles Application Security 


Key Vaive 
Application 


Ë Manitest 
1: Service Workers 
Ë Clear storage 


PÊ Cookies 





Cache 





图 4-7 
43.2 ”获取 数据 


在 sessionStorage 中 使 用 getItem() 方 法 仍然 可 以 获取 数据 ， 直 接 传 入 键 值 即 可 。 
【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 
<meta name=" 





viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<button id="btn"> 获 取 数 据 </button> 
<p id="result"></p> 
<script type="text/javascript"> 
var btn = document.getElementByld("btn"); 
var result = document.getElementByld("result"); 
btn.onclick = function() í 
if(window.sessionStorage){ 
console.log('This browser supports sessionStorage'); 
var data = sessionStorage.getltem(" data"); 
result.innerHTML = data; 
jelsef 
alert(' This browser does NOT support sessionStorage'); 


H 
J 
</script> 
</body> 
</html> 


通过 调用 sessionStorage 对 象 的 getItem() 方 法 可 以 获取 对 应 键 值 存储 的 数据 。 
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4.3.3 ”删除 数据 


在 sessionStorage 中 使 用 remove() 方 法 可 以 删除 某 个 键 值 对 应 的 数据 。 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<button id="add"> 添 加 数据 </button> 
<button id="btn"> 删 除数 据 </button> 
<script type="text/javascript"> 
var btn = document.getElementByld("btn"); 
var add = document.getElementByld("add"); 
add.onclick = function(){ 
if(window.sessionStorage)í 
console.log('This browser supports sessionStorage'); 
SessionStorage.name = "Martin"; 
lelseí 
alert('This browser does NOT support sessionStorage'); 


1 
j 
btn.onclick = function()í 
这 window.localStorage){f 
console.log('This browser supports sessionStorage'); 
localStorage.removeltem("name"); 
}else{ 
alert(This browser does NOT support sessionStorage'); 
1 
H 
</script> 
</body> 
</html> 


434 清除 数据 


和 localStorage 一 样 ， 在 sessionStorage 中 可 以 使 用 clear() 方 法 将 sessionStorage 中 存储 的 数据 


全 部 清空 。 
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【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<button id="add"> 添 加 数据 </button> 
<button id="btn"> 清 除数 据 </button> 
<script type="text/javascript"> 
var btn = document.getElementById("btn"); 
var add = document.getElementByld("add"); 
add.onclick = function()í 
if(window.sessionStorage){ 
console.log('This browser supports sessionStorage'); 
SessionStorage.name = "Martin"; 
SessionStorage.age = "30"; 
SessionStorage.sex = "Male"; 
}else{ 
alert(This browser does NOT support sessionStorage'); 


1 
I 
btn.onclick = function()í 
if(window.sessionStorage){ 
console.log('This browser supports sessionStorage'); 
SessionStorage.clear(); 
}else{ 
alert(This browser does NOT support sessionStorage'); 
J 
j; 
</script> 
</body> 
</html> 


每 当 单 击 “ 清 除数 据 ” 按 钮 时 ， 存 储 在 sessionStorage 中 的 所 有 数据 就 会 被 删除 。 
4.4 storage 对 象 


通过 上 面 的 介绍 发 现 ，localStorage 对 象 和 sessionStorage 对 象 的 方法 相同 , 这 是 因为 二 者 的 原 
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型 都 是 Storage 对 象 。 可 以 在 chrome 控制 台中 打印 localStorage 和 sessionStorage 进行 查看 ， 如 图 
4-8 所 示 。 

通过 _proto 可 以 看 到 ，localStorage 和 sessionStorage 对 象 都 继承 自 Storage 对 象 。Storage 对 象 
是 在 HTML5 中 定义 的 ， 包 括 clear( 方 法 、getItem() 方 法 、setItem() 方 法 、removeItem() 方 法 等 ， 这 
些 都 可 以 用 通过 控制 台 打 印 出 来 的 内 容 查看 。 


[w Ú] — Elements Console Sources Network Timeline Profiles 








© W tp v Preserve log 
> console. log(localStorage) ; 
Y Storage 
length: 9 
w_proto_: Storage 
» clear: function clear() 
P constructor: function Storage() 
» getItem: function getItem() 
> key: function key() 
length: (...) 

> get length: function () 
P removi : function removeItem() 
> setIt function setItem() 






















> Symbol (Sy iterator): function values() 
Symbol (Syı StringTag): "Storage" 

> _proto_: Object 

undefined 

> console.log(sessionStorage); 

Y Storage 

ength: 0 
v pro: : Storage 


p clea tion clear() 
P constructor: function Storage() 
» getItem: function getItem() 
P key: function key() 
length: (...) 
* get length: function () 
: function removeItem() 











Symbol(Symbol.toStringTag): "Storage" 
p _proto_: Object 
undefined 








图 4-8 


4.5 storage 事件 


storage 事件 是 HTML5 中 定义 的 新 事件 。 每 当 Storage 对 象 ( 包 括 sessionStorage 对 象 和 
localStorage 对 象 ) 发 生变 化 时 都 会 触发 storage 事件. 也 就 是 说 ,每 当 调用 setltem() 方 法 、removeltem() 
方法 、clear() 方 法 时 都 会 影响 到 Storage 对 象 ， 进 而 触发 storage 事件 。 通过 监听 storage 事件 可 以 在 
合适 的 时 候 触 发 其 他 方法 。 下 面 给 出 一 个 简单 的 例子 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 
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<meta name="viewport" content="width=device-width. initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<button id="btn"> 添 加 </button> 
<script type="text/javascript"> 
var btn = document.getElementByld("btn"); 
btn.onclick = function() í 
if(window.localStorage){ 
localStorage.setltem('data', 'aaa'); 
jelse{ 
alert(This browser does NOT supportlocalStorage'); 
i: 
Í 
window.addEventListener('storage', function(e){ 
alert(" 成 功 添加 数据 ") 


单 击 添加 按钮 时 会 通过 localStorage.setItem 存储 数据 ， 进 而 触发 storage 事件 。 此 时 ， 浏 览 器 
会 弹出 “成 功 添加 数据 ”的 对 话 框 。 

storage 事件 包含 以 下 4 个 属性 。 
domain: 发 生变 化 的 存储 空间 的 域名 。 
key: 设置 或 者 删除 的 键 名 。 
newValue: 如 果 是 设置 值 ， 就 是 新 值 ; 如 果 是 删除 键 ， 就 是 null。 
oldValue: 键 被 更 改 之 前 的 值 。 


可 以 在 storage 事件 触发 时 灵活 使 用 属性 进行 操作 。 


46 ”应 用 程序 缓存 


HTML5 中 引入 了 应 用 程序 缓存 (离线 缓冲 )， 使 用 应 用 程序 缓存 可 以 将 一 些 文件 缓存 到 本 地 ， 
从 而 在 没有 网 络 的 情况 下 进行 访问 。 有 了 离线 缓存 ， 就 可 以 让 Web 应 用 更 像 原 生 应 用 ， 即 便 在 没 
有 网 络 的 时 候 也 可 以 正常 使 用 。 离 线 缓存 有 以 下 三 大 优势 。 

° 离线 浏览 : 用 户 可 在 应 用 离线 时 使 用 它们 。 

° 速度 : 已 缓存 资源 加 载 得 更 快 。 

° 减少 服务 器 负载 : 浏览 器 将 只 从 服务 器 下 载 更 新 过 或 更 改过 的 资源 。 
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目前 ， 除 了 IE 浏览 器 以 外 ， 其 他 主流 浏览 器 都 支持 应 用 程序 缓存 ， 因 此 可 以 放心 地 在 移动 开 
发 中 使 用 应 用 程序 缓存 技术 。 

应 用 程序 缓存 有 两 个 主要 部 分 ， 一 个 是 HTML 中 的 manifest 属性 ， 另 一 个 是 manifest 文件 。 
首先 ， 需 要 创建 manifest 文件 ， 在 manifest 文件 中 用 某 种 方式 定义 离线 缓存 的 配置 ， 然 后， 使 用 
HTML 结构 将 manifest 文件 按照 某 种 方式 进行 识别 ， 从 而 完成 应 用 程序 缓存 。 

manifest 文件 是 应 用 程序 缓存 的 核心 ,用 来 定义 要 缓存 哪些 文件 、 不 缓存 哪些 文件 ， 被 设置 为 
缓存 的 文件 会 被 存储 到 本 地 ， 可 以 在 没有 网 络 的 情况 下 正常 访问 。 

manifest 文件 的 后 级 名 为 .appcache， 可 以 任意 命名 。manifest 文件 内 容 可 分 为 三 部 分 : 

© CACHE MANIFEST 在 此 标题 下 列 出 的 文件 将 在 首次 下 载 后 进行 缓存 。 

© NETWORK 在 此 标题 下 列 出 的 文件 需要 与 服务 器 连接 ， 且 不 会 被 缓存 。 

© FALLBACK 在 此 标题 下 列 出 的 文件 规定 当 页 面 无 法 访问 时 的 回 退 页 面 (比如 404 Rm). 


在 编写 manifest 文件 时 ， 要 做 的 就 是 定义 上 面 的 三 部 分 ， 每 个 部 分 以 上 述 的 大 写字 母 开头 ， 
作为 一 个 区 域 。 

1. CACHE MANIFEST 

这 部 分 放置 希望 被 缓存 的 文件 。 首 次 浏览 网 页 时 ， 这 些 文件 会 被 缓存 到 本 地 ， 当 下 次 使 用 这 
些 文件 的 时 候 , 就 不 用 从 服务 器 上 下 载 了 , 而 是 直接 在 本 地 加 载 , 即使 不 连接 网 络 也 可 以 正常 加 载 。 

【示例 】 


CACHE MANIFEST 
/main.js 





/main.css 
/logo.png 


上 面 的 示例 中 将 一 个 js 文件 、 一 个 css 文件 和 一 个 png 图 片 文件 进行 了 缓存 。 

2. NETWORK 

在 NETWORK 中 定义 的 文件 永远 不 会 被 缓存 。 这 里 面 的 文件 每 次 使 用 时 都 需要 从 服务 器 上 进 
行 下 载 。 可 以 使 用 * 符 号 ， 以 表明 除 在 CACHE MANIFEST 中 定义 的 需要 被 缓存 的 文件 以 外 其 他 文 
件 都 不 进行 缓存 。 

3. FALLBACK 

当 浏览 器 网 络 连接 失败 时 ， 用 蔡 代 的 页 面 代 蔡 需要 访问 的 文件 。 

下 面 的 FALLBACK 小 节 规定 如 果 无 法 建立 因特网 连接 ， 就 用 “offline.html1” 蔡 代 /html5/ 目 录 
中 的 所 有 文件 : 


FALLBACK: 
/html5/ /404.html 


下 面 是 一 个 完整 的 manifest 文件 (testappcache) : 
CACHE MANIFEST 
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标签 


/main.js 
/main.css 
/logo.png 


NETWORK: 


* 


FALLBACK: 
/html5/ /404.html 


定义 好 了 manifest 文件 后 , 还 需要 把 这 个 文件 运用 到 开发 者 的 页 面 中 。 在 HTML 页 面 中 的 html 
中 ， 如 果 要 用 离线 缓存 ， 就 需要 在 其 中 指定 manifest 属性 ， 方 法 如 下 

<!DOCTYPE HTML> 

<html manifest="test.appcache"> 


</html> 


只 要 像 这 样 引入 manifest 文件 ， 就 可 以 成 功 地 进行 离线 缓存 了 。 下 面 通过 一 个 完整 的 例子 来 


讲解 一 下 离线 缓存 如 何 工 作 。 


【示例 】 


main.html 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div class="main"></div> 
<img src="logo.png"> 
</body> 
</html> 
main.css 
.main{ 
width: 200px; 
height: 200px; 
margin: 0 auto; 
background: red; 
h 
test.appcache 
CACHE MANIFEST 
/main.css 
/logo.png 
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NETWORK: 


* 


将 代码 部 署 到 本 地 服务 器 上 ， 使 用 自己 的 手机 进行 调试 。 当 访问 页 面 时 ， 页 面 会 显示 开发 者 
的 logo 图 片 以 及 一 个 被 定义 的 红色 方块 ， 定 义 红色 方块 的 样式 代码 在 main.css 文件 中 。 接 下 来 ， 
在 服务 器 上 删除 main.css 文件 和 logo 图 片 ， 再 次 访问 页 面 ， 会 发 现 界面 依然 像 原 来 一 样 ， 即 便 文 
件 在 服务 器 上 已 经 被 删除 , 在 本 地 访问 时 这 些 文件 的 内 容 还 会 起 作用 .这 就 说 明 离线 缓存 已 经 生效 ， 
第 一 次 访问 时 ， 浏 览 器 已 经 将 指定 文件 缓存 到 了 开发 者 的 手机 中 ,使 得 在 第 二 次 访问 的 时 候 ， 即 便 
服务 器 上 已 经 没有 样式 文件 和 图 片 了 , 手机 依然 能 够 正常 显示 页 面 , 因为 手机 中 读 取 的 是 本 地 缓存 
的 文件 。 


4. 更 新 离线 缓存 


HTML5 应 用 肯定 需要 更 新 ， 更 新 时 就 不 能 让 用 户 继续 读 取 离 线 文件 了 。 这 时 ， 可 以 通过 更 新 
manifest 文件 来 实现 缓存 的 修改 。 
除 此 之 外 ， 当 用 户 清空 浏览 器 缓存 的 时 候 ， 被 离线 缓存 的 文件 也 会 被 清空 。 


47 ”本 地 数据 库 


Web SQL 是 一 个 独立 的 规范 ， 它 定义 了 Web 的 本 地 数据 库 。 虽 然 可 以 使 用 localStorage 和 
sessionStorage 进行 数据 存储 ， 但 是 由 于 这 二 者 的 方法 比较 简单 ， 因 此 使 用 的 场景 是 有 局 限 性 的 。 
有 了 Web SQL 就 可 以 使 用 更 复杂 的 数据 库 操 作 了 。 

Web SQL 也 使 用 SQL 语句 的 形式 操作 数据 库 ， 如 果 学 习 过 MySQL 或 者 相关 数据 库 ， 就 比较 
容易 理解 Web SQL 了 。 


4.7.1 创建 /打开 数据 库 


利用 openData() 方 法 可 以 打开 指定 数据 库 ， 如 果 指 定数 据 库 不 存在 ， 就 会 自动 进行 创建 。 
openData() 可 传递 的 参数 如 下 : 


数据 库 名 称 

版 本 号 

描述 文本 

数据 库 大 小 

回调 函数 

回调 函数 内 的 方法 会 在 数据 库 成 功 创建 后 执行 ， 最 后 返回 一 个 数据 库 句 柄 ， 用 来 进行 后 续 的 
操作 。 下 面 是 一 个 创建 本 地 数据 库 的 实例 。 
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【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" > 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 

</style> 

</head> 

<body> 

<script type="text/javascript"> 

var db = openDatabase('mydb', '1.0', 'test', 2 * 1024 * 1024, function(){ 
alert(" 数 据 库 创 建成 功 ! m); 


打开 浏览 器 查看 效果 ， 如 果 成 功 创建 了 数据 库 ， 就 会 弹出 “数据 库 创 建成 功 ”提示 框 。 


472 执行 操作 


executeSql() 方 法 用 来 执行 一 系列 的 SQL 命令 ,只 要 是 正常 的 SQL 语句 ,就 可 以 传 入 进行 执行 ， 


包括 增 、 删 、 改 、 查 、 建 表 等 。 下 面 列举 一 些 常用 的 SQL 语句 。 





单单 使 用 executeSql() 方 法 还 不 够 ， 还 需要 使 用 transaction0 方 法 来 进行 业务 的 执行 。 下面 给 出 


一 个 使 用 二 者 创建 一 个 新 的 数据 表 并 插入 两 条 数据 的 例子 。 





【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<button id="build"> 创 建 数 据 库 </button> 
<script type="text/javascript"> 
var build = document.getElementByld("build"); 
build.onclick = function() í 
var db = openDatabase('dbtest1', '1.0', 'test', 2 * 1024 * 1024, function() í 
alert(" 数 据 库 创建 成 功 ! n); 
D 





db.transaction(function (tx) í 
tx.executeSql('CREATE TABLE IF PEOPLE (id unique, name)'); 
tx.executeSql(INSERT INTO PEOPLE (id, log) VALUES (1, "Martin")); 
tx.executeSql(INSERT INTO PEOPLE (id, log) VALUES (2, " Alice"); 
H: 
} 
</script> 
</body> 
</html> 
这 段 代码 创建 了 dbtestl 数据 库 ， 之 后 在 这 个 数据 库 中 创建 了 一 个 PEOPLE 表 ， 表 中 有 两 个 字 
段 ， 分 别 是 id 和 name, HP id 不 能 重复 。 之 后 又 使 用 SQL 语句 插入 了 两 条 数据 。 
那么 创建 的 数据 表 如 何 查看 呢 ? 打开 chrome 浏览 器 的 Application, 打开 Web SQL, 这 里 面 就 
存放 着 存储 的 SQL 数据 ， 如 图 4-9 所 示 。 
Application 
Ë Manifest 


XX Service Workers 
Ë Clear storage 


Storage 


P 8š Local Storage 

> 8 Session Storage 
Ë IndexedDB 

Y Ë Web SQL 





Cache 
E Cache Storage 
EE Application Cache 


Frames 


* 口 top 








图 4-9 
选择 dbtest1， 在 chrome 调试 工具 中 提供 了 命令 行 工具 ， 可 以 直接 在 其 中 输入 SQL 命令 来 创 
建 、 插 入 、 删 除数 据 。 比 如 在 Chrome 浏览 器 中 的 命令 行 工 具 里 输入 如 下 命令 : 


INSERT INTO test (id, name) VALUES (1, "b") 
INSERT INTO test (id, name) VALUES (1, "a") 


打开 test 表 ， 如 图 4-10 所 示 。 
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[w Ó] Elements Console Sources Network Timeline Profiles Application > ix 
rowid id name 
Application 1 i a 
IB Manifest 2 1 b 
次 Service Workers 
Ë Clear storage 





Cache 


& Cache Storage 
EE Application Cache 


Frames 


* 口 top 





图 4-10 


可 以 发 现 ， 已 经 成 功 地 插入 了 两 条 数据 。 
利用 Web SQL 和 chrome 浏览 器 的 调试 工具 可 以 十 分 方便 地 使 用 Web SQL 进行 数据 的 存储 和 
读 取 等 操作 。 





本 章 内 容 要 点 : 


% Web 端 即时 通信 技术 
Æ 短 轮 询 、comet、SSE、Websocket 原理 与 实现 


以 前 限制 Web 开发 接近 原生 应 用 的 一 大 障碍 就 是 Web 开发 很 难 实现 即时 通信 。 原 生 开 发 的 
Android 或 者 iOS 应 用 中 ， 很 常用 的 功能 就 是 服务 器 主动 向 应 用 发 送信 息 ， 并 显示 在 用 户 设备 的 界 
面 上 。 而 在 Web 应 用 中 ， 由 于 其 使 用 的 HTTP 协议 的 特殊 性 ， 只 有 用 户 在 界面 中 进行 操作 后 ， 服 
务 器 得 到 客户 端的 信息 ， 才 能 进行 响应 。 也 就 是 说 ， 使 用 Web 开发 接近 原声 应 用 的 一 大 障碍 是 服 
务 器 端 不 能 主动 向 客户 端 发 送信 息 。 而 HTMLS 为 我 们 提供 了 丰富 的 用 来 高 效 地 实现 服务 器 主动 发 
送 事件 的 方法 。 本 章 将 从 最 传统 的 短 轮 询 技术 开始 详细 介绍 Web 即时 通信 技术 。 


51 W 述 


5.1.1 Web 端 即 时 通信 技术 


即时 通信 技术 简单 地 说 就 是 实现 这 样 一 种 功能 : 服务 器 端 可 以 即时 地 将 数据 的 更 新 或 变化 反 
映 到 客户 端 。 例 如 ， 消 息 即时 推送 等 功能 就 是 通过 这 种 技术 实现 的 。 在 Web 中 ， 由 于 浏览 器 的 限 
制 ， 实 现 即 时 通信 需要 借助 一 些 方法 。 这 种 限制 出 现 的 主要 原因 是 ， 一 般 的 Web 通信 都 是 浏览 
先 发 送 请 求 到 服务 器 ， 服 务 器 再 进行 响应 来 完成 数据 的 更 新 。 
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5.1.2 ”实现 Web 端 即 时 通信 的 方法 


实现 即时 通信 主要 有 四 种 方法 , 分 别 是 短 轮 询 、 长 轮 询 (comet) 、 长 连接 (SSE) 、WebSocket。 
它们 大 体 可 以 分 为 两 类 ， 一 种 是 在 HTTP 基础 上 实现 的 ， 包 括 短 轮 询 、comet 和 SSE; 另 一 种 不 是 
在 HTTP 基础 上 实现 的 ， 即 WebSocket。 下 面 分 别 介绍 这 四 种 轮 询 方法 以 及 它们 各 自 的 优 缺点 。 


1. 短 轮 询 


短 轮 询 的 基本 思路 就 是 浏览 器 每 隔 一 段 时 间 向 浏览 器 发 送 HTTP 请 求 ， 服 务 器 端 在 收 到 请 求 
后 ,不 论 是 否 有 数据 更 新 ， 都 直接 进行 响应 。 这 种 方式 实现 的 即时 通信 在 本 质 上 还 是 浏览 器 发 送 请 
求 、 服 务 器 接收 请 求 的 过 程 ， 通 过 让 客户 端 不 断 地 进行 请 求 ， 模 拟 客户 端 实时 收 到 服务 器 端 数据 的 
变化 。 

这 种 方法 的 优点 是 比较 简单 、 易 于 理解 、 实 现 起 来 没有 什么 技术 难点 。 缺 点 是 由 于 需要 不 断 
地 建立 HTTP 连接 ， 严重 浪费 服务 器 端 和 客户 端的 资源 ， 尤 其 是 在 客户 端 。 举例 来 说 ， 如 果 有 数量 
级 相对 比较 大 的 用 户 同时 位 于 基于 短 轮 询 的 应 用 中 , 那么 每 一 个 用 户 的 客户 端 都 会 疯狂 地 向 服务 器 
端 发 送 HTTP 请 求 ， 而 且 不 会 间断 。 人 数 越 多 ， 服 务 器 端 压力 越 大 ， 这 是 很 不 合理 的 。 因 此 ， 短 轮 
询 不 适用 于 那些 同时 在 线 用 户 数量 比较 大 并 且 很 注重 性 能 的 Web 应 用 。 


2. 长 轮 询 (comet) 


comet 指 的 是 当 服务 器 收 到 客户 端 发 来 的 请 求 后 不 会 直接 进行 响应 ， 而 是 先 将 这 个 请 求 挂 起 ， 
再 判断 服务 器 端 数据 是 否 有 更 新 。 如 果 有 更 新 ， 就 进行 响应 ， 如 果 一 直 没有 数据 就 在 到 达 一 定 的 时 
间 限 制 〈 服 务 器 端 设 置 》 后 关闭 连接 。 

长 轮 询 和 短 轮 询 比 起 来 ， 明 显 减 少 了 很 多 不 必要 的 HTTP 请 求 次 数 ， 节 约 了 资源 。 长 轮 询 的 
缺点 在 于 连接 挂 起 会 导致 资源 的 浪费 。 

3. 长 连接 (SSE) 


SSE 是 HTML5 新 增 的 功能 ， 全 称 为 Server-Sent Events， 它 可 以 允许 服务 推送 数据 到 客户 端 。 
SSE 在 本 质 上 与 之 前 的 长 轮 询 、 短 轮 询 不 同 ， 虽 然 都 是 基于 HTTP 协议 的 ， 但 是 轮 询 需 要 客户 端 先 
发 送 请 求 。SSE 最 大 的 特点 就 是 不 需要 客户 端 发 送 请 求 ， 只 要 服务 器 端 数据 有 更 新 ， 就 可 以 马上 发 
送 到 客户 端 。 

SSE 的 优势 很 明显 ， 不 需要 建立 或 保持 大 量 的 客户 端 发 往 服务 器 端的 请 求 ， 节 约 了 很 多 资源 ， 
提升 了 应 用 的 性 能 。SSE 的 实现 非常 简单 ， 并 且 不 需要 依赖 其 他 插件 。 

4. WebSocket 


WebSocket 是 HTML5 定义 的 一 个 新 协议 。 与 传统 的 HTTP 协议 不 同 ， 该 协议 可 以 实现 服务 器 
与 客户 端 之 间 的 全 双 工 通信 。 简 单 来 说 ， 首 先 需 要 在 客户 端 和 服务 器 端 建立 起 一 个 连接 ， 这 部 分 需 
要 HTTP。 一 旦 建立 连接 ， 客 户 端 和 服务 器 端 就 处 于 平等 的 地 位 ， 可 以 相互 发 送 数据 ， 不 存在 请 求 
和 响应 的 区 别 。 

WebSocket 的 优点 是 实现 了 双向 通信 , 缺点 是 服务 器 端的 逻辑 非常 复杂 。 现在 针对 不 同 的 后 台 
语言 有 不 同 的 插件 可 以 使 用 。 
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5.1.3 ”四 种 Web 即时 通信 技术 比较 
从 兼容 性 角度 考虑 : 
短 轮 询 > 长 轮 询 > 长 连接 SSE>WebSocket 
从 性 能 方面 考虑 : 
WebSocket> 长 连接 SSE> 长 轮 询 > 短 轮 询 


5.2 短 轮 询 原理 与 实现 


524 原理 


短 轮 询 利用 HTTP 的 请 求 /响应 模式 ， 通 过 每 隔 一 定时 间 向 服务 器 发 送 请 求 来 获得 服务 器 数据 
的 更 新 。 在 开发 过 程 中 ， 可 以 利用 AJAX， 然 后 通过 setInterval0 方 法 实现 每 隔 一 段 时 间 向 服务 器 发 
送 请 求 的 功能 。 


522 实现 
后 端 以 PHP 为 例 进行 实现 。 
【客户 端 代码 】 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 短 轮 询 ajax 实现 </title> 
<script type="text/javascript" src="../jquery.min.js"></script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div id="news"></div> 
</form> 
</body> 
<script type="text/javascript"> 
function showUnreadNews()í 
$(document).ready(function() í 
/使 用 jquery 的 ajax 方法 
$.ajax({ 
type: "GET", 
url: "do.php", /请 求 发 送 到 后 台 的 php 文件 
dataType: "json", 
// 请 求 成 功 的 回调 方法 ， 遍 历 获 取 的 数据 进行 客户 端 界 面 的 更 新 
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Success: function(msg) í 
$.each(msg, function(id, title) í 
$("#news").append("<a>" + title + "</a><br>"); 
D; 


DH 
DD); 


} 

// 设 置 每 2s 执行 一 次 showUnreadNews() 方 法 ， 向 服务 器 发 送 请 求 
setInterval('showUnreadNews()',2000); 

</script> 

</html> 


【服务 器 端 代 码 (php) ] 
<?php 
$arr = array('title'=>' 新 闻 ',text=>' 新 闻 内 容 ')，// 服 务 器 端 更 新 的 数据 
echo json_encode($arr); /返回 的 json 数据 


53 ”长 轮 询 原理 与 实现 


531 原理 


长 轮 询 与 传统 AJAX 的 区 别 在 于 ， 客 户 端 会 与 服务 器 端 保持 一 个 长 连接 ， 只 有 当 客 户 端 需要 
的 数据 更 新 时 ， 服 务 器 才 会 主动 将 数据 推送 给 客户 端 。 长 轮 询 的 实现 有 两 种 方式 ,一 种 方式 是 使 用 
基于 AJAX 的 长 轮 询 , 另 一 种 方式 是 基于 Iframe 及 htmlfile 的 流 方式 。 在 基于 AJAX 的 长 轮 询 方式 
中 ， 服 务 器 端 在 接收 到 客户 端 AJAX 发 送 的 请 求 后 不 立即 返回 响应 ， 而 是 阻塞 请 求 直 到 超时 或 有 
数据 更 新 。 当 服务 器 端 在 上 述 情况 下 返回 响应 后 ， 客 户 端 通过 JavaScript 再 次 发 送 请 求 建立 连接 ， 
重复 上 述 步骤 。 
532 实现 


【客户 端 代码 】 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 长 轮 询 ajax 实现 </title> 

<script type="text/javascript" src="../jquery.min.js"></script> 
</head> 

<body> 

<input type="button" id="btn" value="click"> 
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<div id="msg"> 数 据 情况 </div> 
</body> 
<script type="text/javascript"> 
$(function()í 
$("#btn").bind('click', {btn:$('#btn")} function(e)í 
$.ajax({ 
type: 'POST', 
dataType: 'json', 
url: 'ajax.php', 
timeout: '20000', // 设置 请 求 超时 时 间 
data: (time: '2000000'}, // 每 次 请 求 等 待 时 间 ， 将 其 传 到 后 台 用 来 挂 起 请 求 
Success: function(data,status) { // 对 返回 的 数据 进行 判断 和 读 取 
这 data.success = '1'){ 
S$("#msg").append('<br>[ 有 数据 ]'+data.text); 
e.data.btn.click0; // 发 送 请 求 
i 
// 未 从 服务 器 中 获得 数据 
这 data.success = '0')í 
S$("#msg").append('<br>[ 无 数据 ]"); 
e.data.btn.click(); 
I 
}, 
/ajax 超时 ,继续 查询 
error:function(XMLHttpRequest,textStatus,errorThrown){ 
if(textStatus == "timeout"){ 
S$("#msg").append(' 超 时 '); 
e.data.btn.click(); 
} 
J 
D: 
D: 
D: 
</script> 
</html> 


【服务 器 端 代 码 (php) 1 


<?php 
set_time_limit(0);// 无 限 请 求 超时 时 间 
usleep($_POST[time']);// 通 过 前 台 传 过 来 的 数据 设置 挂 起 时 间 
while(true){ /无 限 循环 
$rand = rand(1,999); 
if($rand < 500){ 
$arr = array('success'=>'1','name'=>' 有 值 ','text=>S$rand); 
echo json_encode($arr); 
exit(); 
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}else{ 
Sarr = array('success'=>'0','name'=>' 无 值 ','text=>S$rand); 
echo json encode($arr); 
exit(); 

有 


} 
> 


54 长 连接 的 原理 与 实现 


5.4.1 原理 


SSE 不 需要 依赖 客户 端 向 服务 器 发 送 请 求 ， 而 是 直接 在 服务 器 端 有 数据 更 新 时 发 送 到 客户 端 ， 
相 比 于 轮 询 的 “ 拉 数 据 ”， 这 种 “ 推 数据 ”具有 低 延 迟 、 高 性 能 的 优势 。 

这 种 方法 的 服务 器 端 非常 简洁 ， 只 要 维护 一 个 服务 器 和 客户 端 之 间 的 协议 即 可 。 前 端 使 用 
EventSource 对 象 。 

服务 器 端 需要 提供 的 协议 基本 代码 如 下 : 


data: first event 


data: second event 
id: 100 


event: myevent 
data: third event 
id: 101 


: this is a comment 
data: fourth event 
data: fourth event continue 


下 面 解释 一 下 基本 用 法 。 要 定义 各 个 事件 ， 每 一 个 事件 之 问 使 用 一 个 换行 符 隔 开 。 每 个 事件 
内 部 可 以 有 多 行 ， 每 一 行 都 是 typervalue 的 形式 。type 有 以 下 几 种 选择 ; 

(1) 类 型 为 室 白 ， 表 示 该 行 是 注释 ， 会 在 处 理 时 被 忽略 。 

(2) 类 型 为 data， 表 示 该 行 包含 的 是 数据 。 以 data 开头 的 行 可 以 出 现 多 次 ， 所 有 这 些 行 都 是 
该 事件 的 数据 。 

(3) 类 型 为 event， 表 示 该 行 用 来 声明 事件 的 类 型 。 浏 览 器 在 收 到 数据 时 会 产生 对 应 类 型 的 
事件 。 

(4) 类 型 为 id4， 表 示 该 行 用 来 声明 事件 的 标识 符 。 

(5) 类 型 为 ety， 表 示 该 行 用 来 声明 浏览 器 在 连接 断 开 之 后 进行 再 次 连接 之 前 的 等 待 时 间 。 

比如 上 面 的 第 一 个 事件 ， 只 传输 了 一 个 数据 ， 数 据 内 容 为 first event。 服 务 器 端 通过 这 个 清单 
发 送 到 客户 端 ， 就 可 以 通过 前 端 进行 响应 的 处 理 ， 诸 如 读 取 新 数据 、 更 新 界面 等 
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客户 端 需要 在 JavaScript 中 使 用 EventSource 对 象 。 
首先 , 初始 化 一 个 EventSource 对 象 , 实例 化 的 时 候 需 要 传 入 与 其 交互 的 服务 器 端的 文件 地 址 ， 


var es = new EventSource("sse.php"); 
接 下 来 ， 可 以 进行 事件 监听 。EventSource 给 出 了 三 种 标准 事件 ， 它 们 的 名 称 和 触发 时 机 如 表 
5-1 所 示 。 
表 5-1 EventSource 的 三 种 标准 事件 














事件 名 称 触发 时 机 

open 当成 功 与 服务 器 建立 连接 时 执行 
message 当 收 到 服务 器 发 送 的 事件 时 执行 
error 当 出 现 错误 时 执行 


和 普通 的 事件 一 样 ， 可 以 通过 以 下 两 种 方法 使 用 这 些 事件 : 


es.onmessage = function(e){}; 
es.addEventListener("message" ,function(e){}); 


54.2 ”实现 
服务 器 端 代码 (php) : 
<?php 
header('Content-Type: text/event-stream'); /这 是 专门 为 sse 设置 的 数据 格式 
$time = date('Y-m-d H:i:s'); 
/下 面 这 些 echo 出 来 的 东西 就 是 上 面 说 的 服务 器 端 和 客户 端 之 间 的 协议 
echo 'retry: 3000'.PHP_EOL; 
/retry 类 型 的 数据 ， 规 定 了 浏览 器 在 连接 断 开 之 后 进行 再 次 连接 之 前 的 等 待 时 间 


echo 'data: The server time is: '.$time.PHP_EOL.PHP_EOL; 
?> 


必须 先 设 定 Content-Type 为 text/event-stream， 这 是 为 SSE 专门 定义 的 数据 传输 格式 。 
注意 
接 下 来 通过 PHP 的 echo 输出 协议 ， 上 面 代码 的 输出 结果 如 下 : 
retry:3000 
data:The server time is... 
输出 一 个 事件 。 这 个 事件 中 定义 了 retry 类 型 和 data 类 型 的 行 。 
【客户 端 代码 】 

<html> 

<head> 


<meta charset="UTF-8"> 
<title>basic SSE test</title> 
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</head> 
<body> 
<div id="content"></div> 
</body> 
<script> 
var es = new EventSource("sse.php"); 
es.addEventListener("message",function(e){ 
document.getElementByld("content").innerHTML += "\n"+e.data; 
p; 
</script> 
</html> 
上 面 的 代码 首先 实例 化 了 一 个 EventSource 对 象 , 并 传 入 与 之 通信 的 服务 器 端 文件 sse.php。 利 
用 addEventListener() 方 法 为 对 象 绑 定 一 个 message 事件 (message 在 收 到 服务 器 发 送 的 事件 时 执行 )。 
当 客 户 端 收 到 服务 器 传 来 的 协议 时 为 页 面 添加 数据 ， 通 过 e.data 获取 ， 对 应 于 服务 器 端 协议 表 中 
data 类 型 定义 的 数据 ， 即 “The server time is...” o 


5.5 WebSocket 原理 与 前 端 API 


554 原理 

WebSocket 实现 了 一 次 连接 、 双 方 通信 的 功能 。 首 先 由 客户 端 发 出 WebSocket 请 求 ， 服 务 器 
端 进行 响应 ， 实 现 类 似 TCP 握手 的 动作 。 这 个 连接 一 旦 建立 起 来 ， 就 保持 在 客户 端 和 服务 器 之 间 ， 
两 者 之 间 可 以 直接 进行 数据 的 互相 传送 。 服 务 器 端的 逻辑 比较 复杂 ， 如 果 是 使 用 Java 或 者 node JF 
发 ， 就 可 以 使 用 很 多 封装 好 的 组 件 。 
5.5.2 前端 API 

1. 创建 WebSocket 对 象 

Var Ws = new WebSocket("ws//localhost:8080"); 

WebSocket 是 一 个 不 同 于 HTTP 的 协议 ， 其 参数 传递 中 的 ws:// 前 级 类 似 于 http://， 用 于 进行 协 
议 的 声明 。 

2. 事件 操作 

WebSocket 提供 了 4 个 事件 操作 ， 如 表 5-2 所 示 。 

表 5-2 ”各 事件 触发 时 机 














os u 触发 时 机 

onmessage 收 到 服务 器 响应 时 执行 
onerroe 出 现 异常 时 执行 
onopen 建立 起 连接 时 执行 
onclose 断 开 连 接 时 执行 





Canvas 绘图 


本 章 内 容 要 点 : 

3 Canvas 绘图 基础 

3⁄ Canvas 绘制 图 形 与 图 形变 换 

HTML5 中 新 增 了 Canvas 这 样 一 个 十 分 重要 的 元 素 ， 这 个 元 素 让 在 页 面 上 绘制 图 形成 为 可 能 。 
使 用 Canvas 可 以 让 开发 者 在 HTML 文档 中 绘制 各 种 各 样 的 图 形 。 

在 Canvas 中 绘制 图 像 ， 是 通过 JavaScript 代码 添加 线条 、 颜 色 等 来 实现 的 ， 使 用 Canvas 绘图 
时 ， 还 可 以 通过 JavaScript 的 一 些 方法 或 DOM 操作 加 入 一 些 高 级 的 动画 效果 。 

在 移动 开发 中 ， 使 用 Canvas 绘制 多 种 多 样 的 图 像 更 加 重要 ， 可 以 极 大 地 提升 开发 者 移动 应 用 
的 表现 能 力 。 使 用 Canvas 制作 一 些 动画 效果 ,在 移动 设备 中 非常 常见 ， 尤 其 是 移动 端的 游戏 制作 ， 
没有 Canvas 是 根本 没 法 进行 的 。 


6.1 Canvas 基础 


6.1.1 基本 Canvas 创建 


要 想 开 始 在 HTML 中 使 用 Canvas, 首先 要 在 HTML 文档 中 定义 一 个 Canvas 标签 元 素 .Canvas 
标签 包含 两 个 用 来 控制 画布 大 小 的 属性 一 一 width 属性 和 height 属性 ， 通 过 为 width 属性 和 height 
属性 设 定 属性 值 ， 可 以 指定 画布 的 大 小 。 下 面 的 例子 定义 了 一 个 长 和 宽 各 为 500 的 Canvas 画布 。 
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【示例 】 ”画布 定义 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<Canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 
</script> 
</body> 
</html> 


一 定 要 为 Canvas 设 定 一 个 id 值 ， 这 样 可 以 方便 地 在 JavaScript 中 对 这 个 Canvas 进行 操作 。 
打开 浏览 器 ， 发 现 界面 上 什么 都 没有 ， 因 为 只 是 定义 了 一 个 画布 ， 还 没有 在 画布 上 进行 任何 


元 素 的 绘制 。 下 面 在 这 个 画布 上 开始 元 素 的 绘制 。 


Canvas 画布 上 的 绘制 过 程 基本 上 都 是 在 JavaScript 中 进行 , HTML 对 Canvas 的 设 定 主要 体现 


在 大 小 、 样 式 等 方面 。 下 面 为 这 个 画布 添加 一 个 边框 ， 让 画布 范围 更 明显 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 
canvas { 
border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 
var canvas = document.getElementByld("canvas"); 
var context = canvas.getContext("2d"); 
context.beginPath(); 
context.move To(0, 0); 
context.line To(500, 500); 
context.stroke(); 
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</script> 
</body> 
</html> 


Q! 尽量 不 要 在 CSS 中 设置 Canvas 的 宽 高 , 而 是 使 用 Canvas 的 width 属性 和 height 属性 设 


Ei 置 画布 的 宽 高 。 


6.1.2 ”开始 在 Canvas 上 绘制 元 素 


下 面 就 可 以 通过 JavaScript 在 Canvas 上 绘制 图 像 了 。 这 里 先 从 最 简单 的 入 手 ， 介 绍 一 下 如 何 
在 画布 上 绘制 一 条 直线 。 
首先 ， 需 要 使 用 JavaScript 获取 Canvas 元 素 : 


var canvas = document.getElementByld("canvas"); 


上 面 的 代码 使 用 JavaScript 中 的 id 选择 器 对 这 个 画布 元 素 进行 获取 。 下 一 步 ， 需 要 获取 上 下 文 
环境 ， 可 以 简单 地 理解 为 要 将 这 个 Canvas 元 素 变 成 一 个 可 以 直接 绘制 的 画布 对 象 : 


Var context = canvas.getContext("2d"); 


上 面 的 方法 调用 了 Canvas 的 getContext() 方 法 ， 传 入 字符 串 参数 24， 表 示 要 绘制 的 是 二 维 的 
图 像 ，getContext() 方 法 会 返回 对 应 的 上 下 文 绘制 环境 。 在 上 面 的 代码 中 ，context 就 是 一 个 画布 给 
制 环境 ， 要 在 画布 上 进行 各 种 各 样 的 操作 都 是 通过 context 调用 相关 方法 实现 的 。 


6.1.3 ”绘制 一 条 直线 


想 要 在 一 个 画布 上 绘制 一 条 直线 ， 首 先 需要 找到 一 个 起 始点 “下 笔 ”。 选 中 下 笔 点 后 ， 把 笔下 落 
到 那个 点 上 。 接 下 来 ， 想 往 哪个 位 置 画 线 ， 就 可 以 往 哪 个 位 置 画 线 ， 只 要 选中 一 个 终止 点 ， 把 笔 贴 着 
画 纸 移 到 终止 点 ， 这 条 线 的 方向 、 长 短 就 都 能 确定 了 ， 也 就 画 出 了 一 条 想 要 的 直线 。 

Canvas 中 的 绘图 原理 和 上 述 在 纸 上 画 图 的 原理 是 一 样 的 。 绘 制 一 条 直线 ， 需 要 调用 Canvas 中 
最 基本 的 4 个 方法 : beginPath() 方 法 、moveTo() 方 法 、lineTo() 方 法 和 stroke() 方 法 。beginPath() 方 法 
表示 要 开始 绘制 了 , 这 个 方法 在 后 面 还 会 有 更 深入 的 探讨 。 moveTo() 方 法 就 是 上 面 所 说 的 选择 下 笔 
点 下 笔 这 个 动作 ，moveTo0 方 法 传 入 两 个 参数 ， 分 别 表示 落笔 点 的 x AERA y 轴 坐 标 。lineTo() 
就 是 想 画 到 哪里 ， 同 样 传 入 x 轴 坐 标 和 y 轴 坐 标 。 最 后 ， 调 用 stroke0 方 法 ， 这 个 是 实际 的 绘制 方 


法 ，stroke() 方 法 表示 绘制 线条 。 这 里 和 正常 的 画 画 可 能 不 同 ， 之 前 的 方法 规划 了 绘制 的 路 径 ， 最 
后 需要 调用 一 次 stroke() 方 法 在 这 个 路 径 上 绘制 出 线条 。 这 样 ， 就 完成 了 一 条 直线 的 绘制 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 


<meta charSet = "utf-8" /> 

<meta name = "viewport" content = "width = device-width. initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 

canvas í 
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border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 
var canvas = document. getElementById("canvas"); 
var context = canvas.getContext("2d"); 
context.beginPath(); 
context.moveTo(0, 0); 
context.lineTo(500, 500); 
context.stroke(); 
</script> 
</body> 
</html> 


效果 如 图 6-1 所 示 。 
这 样 就 成 功 迈 出 了 使 用 Canvas 绘图 的 第 一 步 。 
在 绘制 基本 图 形 时 , 牢记 Canvas 的 绘图 原理 , 就 会 非常 容易 。 Canvas 
绘图 和 平常 在 纸 上 绘 图 基本 一 样 ， 唯 一 的 不 同 是 先 指定 好 绘图 的 路 径 再 N 
调用 一 次 stroke) E IATE ER]. ` 


614 为 直线 设 定 样式 


上 面 的 代码 已 经 成 功 地 在 画布 中 绘制 出 了 一 条 直线 。 那 么 ， 如 何 调 图 6-1 
整 线条 的 样式 呢 ? 在 Canvas 中 可 以 对 线条 的 颜色 、 宽 度 进行 调整 。 

在 Canvas 中 ，context 上 下 文 环境 也 是 一 个 对 象 。context 有 一 些 属性 ， 可 以 用 来 控制 元 素 的 样 
式 。context 对 象 的 strokeStyle 属性 可 以 控制 使 用 stroke() 方 法 绘制 的 线条 的 颜色 ， 传 入 的 值 可 以 是 
CSS 中 能 够 使 用 的 任何 颜色 值 。context 对 象 的 lineWidth 属性 可 以 设置 线条 的 宽度 。 下 面 就 使 用 这 
两 个 方法 修改 直线 的 样式 。 

【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 
canvas í 

border: 1px solid black; 
} 
</style> 
</head> 
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<body> 

<canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 

var canvas = document.getElementByld("canvas"); 

Var context = canvas.getContext("2d"); 

context.strokeStyle = "red"; 

context.line Width 
context.beginPath(); 
context.moveTo(0, 0); 
context.lineTo(500, 500); 
context.stroke(); 
</script> 

</body> 

</html> 


效果 如 图 6-2 所 示 。 





图 6-2 
6.1.5 ”绘制 多 条 直线 


想 在 界面 上 绘制 多 条 直线 也 很 简单 ,只 要 多 次 重复 调用 context 对 象 的 moveTo() 方 法 和 lineTo() 
方法 就 可 以 了 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 
canvas{ 
border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="500"></canvas> 
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方法 和 lineTo() 方 法 先 指 定 两 条 直线 的 路 径 ， 再 使 用 stroke() 方 法 将 两 
条 直线 一 起 画 出 来 。 


是 可 以 重复 赋值 的 ， 后 面 的 值 会 覆盖 前 面 的 值 。 先 调用 stroke0 方 法 给 
制 一 条 直线 ， 再 利用 moveTo() 方 法 和 lineTo() 方 法 指定 另 一 条 路 径 ， 
重新 设 定 strokeStyle 属性 值 和 lineWidth 属性 值 ， 再 调用 一 次 stroke() 
方法 ， 就 可 以 实现 了 。 这 种 想法 的 实现 代码 如 下 : 





<script type = "text/javascript"> 

var canvas = document.getElementByld("canvas"); 
Var context = canvas.getContext("2d"); 
context.beginPath(); 
context.strokeStyle = "red"; 
context.line Width = '5'; 
contextmoveTo(0, 0); 
context.lineTo(500, 500); 
context.moveTo(0, 500); 

context.line To(500, 0); 
context.stroke(); 

</script> 

</body> 

</html> 


效果 如 图 6-3 所 示 。 
上 面 按照 需求 绘制 了 两 条 直线 。 原 理 还 是 一 样 的 ， 利 用 moveTo() 





如 果 想 绘制 出 两 条 不 同样 式 的 直线 该 怎么 办 呢 ? 因为 对 象 的 属性 





<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 
canvas í 
border: 1px solid black: 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 
var canvas = document.getElementByld("canvas"); 
var context = canvas.getContext("2d"); 
context.beginPath(); 
context.strokeStyle = "red"; 
context.line Width = '5'; 
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context.moveTo(0, 0); 
context.lineTo(500, 500); 
context.stroke(); 
context.strokeStyle = "green"; 
context.line Width = '2'; 
context.moveTo(0, 500); 
context.line To(500, 0); 
context.stroke(); 
</script> 

</body> 

</html> 


按照 这 个 思路 进行 绘制 ， 效 果 如 图 6-4 所 示 。 

绘制 之 后 ， 界 面 上 有 三 条 直线 ， 这 并 不 是 我 们 想 要 的 结果 。 为 什么 
会 出 现 这 种 情况 呢 ? 

其 实 ， 如 果 看 懂 了 前 面 有 关 Canvas 的 原理 ， 就 不 难 解释 这 个 问题 
了 。Canvas 是 先 通 过 moveTo() 方 法 和 lineTo( 方 法 指定 路 径 的 ， 最 后 调 
用 stroke() 方 法 进行 绘制 。 其 实 ， 调 用 stroke() 方 法 后 ， 路 径 并 不 会 被 删 
除 ， 之 前 指定 的 路 径 还 是 一 直 保留 着 的 。 

上 面 的 代码 中 调用 了 两 次 stroke() 方 法 。 第 一 次 调用 stroke0 方 法 时 ， 图 64 
界面 上 有 一 个 路 径 ，Canvas 按照 这 个 路 径 绘制 了 一 条 直线 。 第 二 次 调用 stroke() 方 法 时 ， 由 于 重新 
指定 了 一 条 路 径 , 并 且 第 一 条 路 径 并 没有 被 删除 ， 因 此 会 绘制 出 两 条 直线 , 而 且 样 式 是 后 来 指定 的 
样式 。 所 以 ， 最 后 的 效果 是 图 6-4 所 示 的 三 条 直线 。 

如 果 删 除 之 前 的 路 径 ， 让 每 次 的 绘制 互 不 干扰 呢 ? Canvas 中 的 beginPath() 方 法 和 closePath() 
方法 就 是 这 个 用 处 。 每 次 绘制 开始 ， 调 用 beginPath() 方 法 ， 表 示 开 始 一 次 绘制 。 绘 制 结束 后 ， 想 要 
清除 之 前 定义 的 轨迹 时 ， 可 以 使 用 closePath0) 方 法 。beiginPath() 方 法 和 closePath() 方 法 之 间 的 内 容 
就 相当 于 一 次 绘制 ， 下 面 修改 代码 ， 达 到 想 要 实现 的 效果 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 
canvas í 
border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 
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var canvas = document.getElementByld("canvas"); 
var context = canvas.getContext("2d"); 
context.beginPath(); 
context.strokeStyle = "red"; 
context.line Width = '5'; 
context.moveTo(0, 0); 
context.lineTo(500, 500); 
context.stroke(); 

context.closePath(); 
contextbeginPath(); 
context.strokeStyle = "green"; 
context.line Width = '2'; 
context.moveTo(0, 500); 

context.line To(500, 0); 
context.stroke(); 

</script> 

</body> 

</html> 


效果 如 图 6-5 所 示 。 
这 次 ， 成 功 地 绘制 了 两 条 不 同样 式 的 直线 。 
上 面 介绍 的 是 Canvas 绘制 图 像 的 基础 知识 ， 其 实 主要 是 Canvas 


绘制 图 像 的 原理 ， 了 解 了 基本 原理 ， 后 面 的 学 习 就 简单 了 。 


6.22 ”使 用 Canvas 绘制 图 形 


6.2.1 绘制 矩形 


Canvas 提供 了 一 个 专门 绘制 矩形 的 方法 strokeRect0)， 使 用 这 个 方法 可 以 直接 绘制 出 一 个 矩形 


的 线条 。strokeRect() 方 法 传递 4 个 参数 ， 分 别 是 矩形 起 始点 的 x 轴 坐 标 、y 轴 坐 标 以 及 矩形 的 长 和 
宽 。 有 了 这 4 个 因素 就 可 以 确定 一 个 矩形 了 。 同时 , 仍然 可 以 使 用 之 前 介绍 过 的 strokeStyle 属性 和 
lineWidth 属性 来 指定 矩形 线条 的 样式 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 
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<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 
canvas{ 
border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 
var canvas = document.getElementByld("canvas"); 
var context = canvas.getContext("2d"); 
context.beginPath(); 
context.strokeStyle = "red"; 
context.line Width = '3'; 
context.strokeRect(10, 10, 250 ,200); 
context.closePath(); 
</script> 
</body> 
</html> 


效果 如 图 6-6 所 示 。 

上 面 绘制 的 是 矩形 线条 。 对 于 二 维 图 形 , 还 可 以 绘制 带 填充 效果 
的 图 形 。 在 Canvas 中 ， 要 想 绘制 有 填充 效果 的 图 形 ， 需 要 调用 fil 
相关 的 方法 ， 例 如 ，fillRect() 就 是 绘制 填充 矩形 的 方法 ， 它 的 使 用 和 
strokeRect() 相 同 , 传 入 的 参数 都 是 一 样 的 。Canvas 中 的 图 形 绘制 都 是 
这 样 ， 被 分 为 线条 绘制 和 图 形 绘制 ， 分 别 使 用 stroke 相关 方法 和 fill 
相关 方法 。 

相对 应 的 ， 如 果 想 设 定 填充 图 形 的 颜色 ， 就 通过 修改 context 对 
象 的 fillstyle 属性 值 来 实现 。 下 面 使 用 fill 相关 的 方法 和 属性 绘制 一 图 6-6 
个 黑色 的 矩形 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 
canvas í 

border: 1px solid black; 
} 
</style> 
</head> 
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<body> 

<canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 

var canvas = document.getElementByld("canvas"); 
var context = canvas.getContext("2d"); 
context.beginPath(); 

context.fillStyle = "black"; 

context.fillRect(10, 10, 250 ,200); 
context.closePath(); 

</script> 

</body> 

</html> 


效果 如 图 6-7 所 示 。 
6.2.2 ”绘制 圆 形 


要 想 绘 制 圆 形 ， 可 以 使 用 Canvas 中 的 arc0 方 法 进行 绘制 ，arc() 
方法 需要 传 入 如 下 参数 。 
x: 设 定 要 绘制 圆 形 的 圆心 的 x 轴 坐标 。 
y: 设 定 要 绘制 圆 形 的 圆心 的 y 轴 坐标 。 
radius: 设 定 圆 形 的 半径 。 
startAngle: 设 定 开 始 角 度 。 图 6-7 
endAngle: 设 定 结束 角度 。 
anticlockwise: 设 定 是 否 沿 顺 时 针 方 向 进行 绘制 。 


首先 ， 使 用 are() 方 法 绘制 一 个 最 简单 的 圆 形 。 
【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 





<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 
canvas{ 
border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="500"></canvas> 





<script type = "text/javascript"> 
var canvas = document.getElementByld("canvas"); 
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Var context = canvas.getContext("2d"); 
context.beginPath(); 

context. fillStyle = "red"; 

context.arc(100, 100, 50, 0, Math.PI*2, true); 
context. fill); 

context.closePath(); 

</script> 

</body> 

</html> 


效果 如 图 6-8 所 示 。 

利用 arc() 方 法 绘制 圆 形 的 时 候 ， 也 就 是 进行 轨迹 的 指定 ， 最 后 O 
调用 一 次 fl0 方 法 完成 图 形 的 绘制 。 这 和 直线 的 绘制 原理 类 似 ， 和 
矩形 的 绘制 方法 不 同 。 

下 面 看 一 下 利用 arc() 方 法 绘制 圆 形 的 具体 细节 。 首 先 ， 前 两 个 
参数 确定 了 圆心 的 位 置 ， 第 三 个 参数 确定 了 圆 的 半径 ， 第 四 和 第 五 
个 参数 用 来 确定 开始 到 结束 绘制 弧度 的 范围 。 在 上 面 的 例子 中 ， 开 
始 绘制 的 弧度 为 0， 结 束 绘制 的 弧度 为 Math.PI*2， 也 就 是 360 度 ， 


最 终 表现 的 是 一 个 完整 的 圆 。 最 后 一 个 参数 设 定 圆 是 沿 顺 时 针 方向 图 68 
绘制 还 是 逆 时 针 方向 绘制 的 .由 于 上 面 指定 了 绘制 360 E, 因此 不 论 是 顺 时 针 绘制 还 是 逆 时 针 绘 制 ， 
最 终 效果 都 是 整个 圆 形 。 

通过 下 面 的 例子 来 加 深 一 下 对 arc() 方 法 后 三 个 参数 的 理解 。 

【示例 】 

<!DOCTYPE> 

<html> 

<head> 


<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 
canvas í 
border: 1px solid black: 
h 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 
var canvas = document.getElementByld("canvas"); 
Var context = canvas.getContext("2d"); 
context.beginPath(); 
context.fillStyle = "red"; 
context.arc(60, 60, 30, 0, Math.PI12, true); 
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context.fill(); 

context.closePath(); 

context.beginPath(); 

context.arc(140, 60, 30, 0, Math.PI6, true); 
context.fill(); 

context.closePath(); 

context.beginPath(); 

context.arc(220, 60, 30, 0, Math.P1/4, true); 
context. fill(); 

context.closePath(); 

contextbeginPath(); 

context.arc(300, 60, 30, 0, Math.P1/2, true); 
context. fill(); 

context.closePath(); 

context.beginPath(); 

context.arc(380, 60, 30, 0, Math.PI, true); 
context. fill(); 

context.closePath(); 

context.beginPath(); 

context.arc(60, 140, 30, 0, Math.PI*1.2, true); 
context. fill(); 

context.closePath(); 

context.beginPath(); 

context.arc(140, 140, 30, 0, Math.PI* 1.5, true); 
context. fill(); 

context.closePath(); 

context.beginPath(); 

context.arc(220, 140, 30, 0, Math.PI* 1.8, true); 
context. fill(); 

context.closePath(); 

</script> 

</body> 

</html> 


效果 如 图 6-9 所 示 。 
上 面 的 例子 使 用 相同 大 小 的 圆 、 开 始 弧 度 和 不 同 的 结束 弧度 绘 


制 了 一 批 圆 形 。 从 中 可 以 看 到 ， 弧 度 范围 的 设 定 影响 的 是 圆 的 部 分 。 
当 终 止 弧度 为 180 度 时 绘制 的 就 是 一 个 半圆 。 随 着 终止 弧度 的 增 大 ， 
绘制 的 圆 形 越 来 越 小 。 

















下 面 修改 圆 的 绘制 方向 参数 。 














图 6-9 
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【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 
canvas{ 
border: 1px solid black; 
ji 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 
var canvas = document. getElementById("canvas"); 
var context = canvas.getContext("2d"); 
context.beginPath(); 
context.fillStyle = "red"; 
context.arc(60, 60, 30, 0, Math.P1/12, false); 
context. fill(); 
context.closePath(); 
context.beginPath(); 
context.arc(140, 60, 30, 0, Math.PI6, false); 
context. fill(); 
context.closePath(); 
context.beginPath(); 
context.arc(220, 60, 30, 0, Math.P1⁄4, false); 
context. fill(); 
context.closePath(); 
context.beginPath(); 
context.arc(300, 60, 30, 0, Math.PI/2, false); 
context. fill(); 
context.closePath(); 
context.beginPath(); 
context.arc(380, 60, 30, 0, Math.PI, false); 
context. fill(); 
context.closePath(); 
context.beginPath(); 
context.arc(60, 140, 30, 0, Math.PI*1.2, false); 
context. fill(); 
context.closePath(); 
context.beginPath(); 
context.arc(140, 140, 30, 0, Math.PI* 1.5, false); 
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context.fill(); 

context.closePath(); 

context.beginPath(); 

context.arc(220, 140, 30, 0, Math.PI* 1.8, false); 
context. fill(); 

context.closePath(); 

</script> 

</body> 

</html> 


效果 如 图 6-10 所 示 。 
可 以 看 到 ， 这 两 个 不 同 的 方向 绘制 出 来 的 圆 形 是 互 oce o 
补 的 ， 这 就 是 arc() 方 法 最 后 三 个 参数 的 效果 ， 使 用 这 三 
个 参数 可 以 绘制 出 不 同 部 分 的 圆 形 。 
同样 的 ， 如 果 只 想 绘制 圆 形 的 轮廓 ， 使 用 stroke() 方 
法 代替 fl10 方 法 。 修 改 上 面 的 例子 , 将 绘制 的 圆 形变 为 绘 
制 圆 形 轮廓 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 
canvas í 
border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 
var canvas = document.getElementByld("canvas"); 


图 6-10 


Var context = canvas.getContext("2d"); 
context.beginPath(); 

context.fillStyle = "red"; 

context.arc(60, 60, 30, 0, Math.PI/12, false); 
context.stroke(); 

context.closePath(); 

context.beginPath(); 

context.arc(140, 60, 30, 0, Math.PI/6, false); 
context.stroke(); 

context.closePath(); 
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context.beginPath(); 

context.arc(220, 60, 30, 0, Math.P1⁄4, false); 
context.stroke(); 

context.closePath(); 

context.beginPath(); 

context.arc(300, 60, 30, 0, Math.P1/2, false); 
context.stroke(); 

context.closePath(); 

contextbeginPath(); 

context.arc(380, 60, 30, 0, Math.PI, false); 
context.stroke(); 

context.closePath(); 

context.beginPath(); 

context.arc(60, 140, 30, 0, Math.PI*1.2, false); 
context.stroke(); 

context.closePath(); 

context.beginPath(); 

context.arc(140, 140, 30, 0, Math.PI* 1.5, false); 
context.stroke(); 

context.closePath(); 

context.beginPath(); 

context.arc(220, 140, 30, 0, Math.PI* 1.8, false); 
context.stroke(); 

context.closePath(); 

</script> 

</body> 

</html> 


效果 如 图 6-11 所 示 。 





3. 绘制 更 复杂 的 曲线 


任何 一 条 曲线 ， 不 管 它 是 什么 形状 的 ， 在 数学 上 都 能 表示 出 来 ， 贝 塞 尔 曲线 就 是 这 种 数学 上 


的 表示 方法 。 在 Canvas 中 ， 借 助 贝 塞 尔 曲线 这 一 模型 可 以 绘制 出 任何 一 种 曲线 。 
贝 塞 尔 曲线 分 为 二 次 贝 塞 尔 曲线 和 三 次 贝 塞 尔 曲线 ， 数 学 模型 如 下 : 


° ° 9 


2 &% 2 Ñ 
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可 以 看 到 ， 二 者 的 区 别 在 于 ， 二 次 贝 塞 尔 曲线 有 一 个 控制 点 ， 而 三 次 贝 塞 尔 曲线 有 两 个 控制 
点 。 绘 制 贝 塞 尔 曲 线 ， 也 就 是 指定 这 些 关键 点 的 坐标 。 

在 Canvas 中 ， 绘 制 二 次 贝 塞 尔 曲线 时 使 用 quadraticCurveTo 方法 ， 传 入 的 参数 包括 控制 点 的 
x 轴 坐 标 、y 轴 坐 标 ， 以 及 终点 的 x 轴 坐标 和 了 轴 坐 标 。 下 面 给 出 一 个 使 用 quadraticCurveTo() 方 法 
绘制 二 次 贝 塞 尔 曲 线 的 例子 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 
canvas í 
border: 1px solid black; 
J 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 
var canvas = document.getElementByld("canvas"); 





var context = canvas.getContext("2d"); 
context.beginPath(); 

context.moveTo(50, 50); 
context.quadraticCurveTo(100, 200, 400, 100); 
context.stroke(); 

</script> 

</body> 

</html> 


效果 如 图 6-12 所 示 。 

类 似 的 ， 要 想 使 用 有 两 个 控制 点 的 贝 塞 尔 曲 线 ， 调 用 
bezierCurve() 方 法 即 可 , 需要 传 入 的 参数 分 别 是 两 个 控制 点 的 坐 Ns 
标 和 终止 点 的 坐标 。 下 面 给 出 一 个 使 用 bezierCurve0 方 法 绘制 
贝 塞 尔 曲线 的 例子 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 6-12 
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<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 
canvas í 
border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 
var canvas = document.getElementByld("canvas"); 
var context = canvas.getContext("2d"); 
context.beginPath(); 
context.moveTo(50, 50); 
context.bezierCurveTo(300, 200,300, 120, 400, 50); 
context.stroke(); 
</script> 
</body> 
</html> 


效果 如 图 6-13 所 示 。 


S a 


图 6-13 


三 次 贝 塞 尔 曲线 比 二 次 贝 塞 尔 曲线 的 表现 形式 更 丰富 。 在 开发 时 ， 可 以 根据 开发 者 的 需求 选 
择 适 合 的 方法 来 绘制 曲线 。 


6.3 图 形变 换 


通过 前 面 的 例子 ， 已 经 掌握 了 使 用 Canvas 绘图 的 基础 以 及 基本 图 形 、 曲 线 的 绘制 。 接 下 来 介 
绍 如 何 使 用 Canvas 中 的 方法 对 这 些 基本 图 形 进行 变换 。 

Canvas 为 开发 者 提供 了 很 多 方法 ， 可 以 对 图 形 进 行 各 种 变换 。 例 如 ， 将 绘制 好 的 图 形 平移 、 
对 图 形 的 大 小 进行 缩放 、 旋 转 图 形 等 。 使 用 这 些 方法 , 可 以 快速 方便 地 将 开发 者 在 画布 上 绘制 的 规 
规矩 矩 的 图 形 进行 神奇 的 变化 。 


1. 平移 


在 Canvas 中 ， 要 想 平移 元 素 ， 可 以 使 用 translate() 方 法 。translate() 方 法 需要 传 入 两 个 参数 ， 分 
别 为 将 原 图 形 沿 着 x HA y 轴 平 移 的 距离 。 下 面 给 出 一 个 使 用 translate() 进 行 平移 变换 的 例子 。 
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【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 
canvas í 
border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 
var canvas = document.getElementByld("canvas"); 
var context = canvas.getContext("2d"); 
context.beginPath(); 
context.fillStyle = "green"; 
context.fillRect(30, 30, 200, 150); 
context.translate(100, 200); 
context.fillRect(30, 30, 200, 150); 
context.closePath(); 
</script> 
</body> 
</html> 


效果 如 图 6-14 所 示 。 


从 上 面 的 这 段 代码 中 可 以 看 出 translate 方法 以 及 其 他 相关 ga 
Canvas 图 形变 换 方法 的 一 般 使 用 方法 。 当 在 context 对 象 上 调用 


translate() 方 法 时 ， 绘 制 的 参考 点 就 从 原来 的 (0, 0) 坐 标点 位 置 移 动 到 
了 translate() 方 法 设 定 的 位 置 ， 然 后 才 开 始 进行 绘制 。 这 就 是 调用 
Canvas 中 translate() 方 法 的 原理 。 


个 画布 中 的 绘制 规则 。 如 果 想 在 后 面 的 绘制 中 消除 translate() 方 法 的 


也 就 是 说 ，translate() 方 法 不 是 针对 某 一 个 图 形 ， 而 是 改变 了 整 














影响 ， 让 后 面 的 图 形 不 平移 ， 需 要 再 一 次 调用 translate() 方 法 ， 让 画 图 6-14 
布 坐标 轴 的 原点 回 到 原来 的 位 置 。 

【示例 】 

<!DOCTYPE> 

<html> 

<head> 


<meta charSet = "utf-8" /> 
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<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 


<style type = "text/css"> 
canvas{ 

border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 
var canvas = document.getElementByld("canvas"); 
var context = canvas.getContext("2d"); 
context.beginPath(); 
context.fillStyle = "green"; 
context.translate(100, 200); 
context.fillRect(30, 30, 200, 150); 
context.translate(-100, -200); 
context.fillRect(30, 30, 200, 150); 
context.closePath(); 
</script> 
</body> 
</html> 


上 面 的 例子 就 使 用 了 这 个 规则 ， 让 坐标 轴 又 回 到 了 最 初 的 状态 。Canvas 中 其 他 的 图 形变 换 方 
法 也 是 类 似 的 原理 。 这 就 好 比 站 在 一 个 固定 的 位 置 在 画 纸 上 绘画 ， 人 是 不 能 动 的 ， 想 绘制 形状 变换 


的 元 素 ， 就 需要 移动 这 张 纸 来 实现 。 
2. 旋转 


在 Canvas "P, 使 用 rotate() 方 法 可 以 对 图 形 进 行 旋 转变 换 。rotate() 方 法 的 原理 和 translate() 方 法 
是 类 似 的 ， 都 是 对 画布 进行 操作 。rotate() 方 法 传 入 一 个 旋转 的 角度 ， 正 值 表示 向 顺 时 针 方向 旋转 ， 


负 值 表示 向 逆 时 针 方 向 旋转 。 下 面 给 出 一 个 使 用 rotate() 方 法 进行 图 形 旋转 的 例子 。 
【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 


<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 


<style type = "text/css"> 
canvas{ 

border: 1px solid black; 
} 
</style> 
</head> 
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<body> 

<canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 

var canvas = document.getElementByld("canvas"); 
var context = canvas.getContext("2d"); 
context.beginPath(); 

context.fillStyle = "green"; 

context.fillRect(30, 30, 200, 150); 
contextrotate(Math.PI10); 

context.fillRect(230, 230, 200, 150); 
context.closePath(); 

</script> 

</body> 

</html> 


效果 如 图 6-15 所 示 。 | 
se E 


在 Canvas 中 ， 可 以 使 用 scale() 方 法 进行 缩放 变换 。scale() 
方法 需要 传 入 两 个 参数 ， 分 别 是 x 轴 的 缩放 程度 和 y 轴 的 缩放 
程度 ,下面 给 出 一 个 使 用 scale() 方 法 进行 图 形 缩放 变换 的 例子 。 





【示例 】 图 6-15 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 
canvas{ 
border: 1px solid black; 
b 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 
var canvas = document.getElementByld("canvas"); 
var context = canvas.getContext("2d"); 
context.beginPath(); 
context.fillStyle = "green"; 
context.fillRect(30, 30, 200, 150); 
context.scale(0.5, 0.5); 
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context.fillRect(230, 530, 200, 150); 
context.closePath(); 

</script> 

</body> 

</html> 


效果 如 图 6-16 所 示 。 
和 其 他 图 形 方法 的 原理 一 样 ， 设 定 scale0 方 法 后 ， 要 想 恢复 到 == 
原来 的 形状 ， 就 需要 使 用 scale0 方 法 逆向 进行 形状 变换 。 





图 6-16 
6.4 图 形 的 组 合 


6.4.1 绘制 两 个 图 形 
通过 之 前 的 介绍 ， 已 经 清楚 了 图 形 的 绘制 以 及 图 形 的 变换 。 下 面 在 一 个 画布 上 绘制 两 个 图 形 。 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 
canvas{ 
border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 
var canvas = document.getElementById("canvas"); 
Var context = canvas.getContext("2d"); 
context.beginPath(); 
context.fillStyle = "green"; 
context.fillRect(30, 30, 200, 150); 
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context. fillStyle = "red"; 

context.arc(210, 180, 50, 0, Math PI*2, true); 
context.fill() 

context.closePath(); 

</script> 

</body> 

</html> 


效果 如 图 6-17 所 示 。 
在 上 面 的 代码 中 绘制 了 一 个 矩形 和 一 个 圆 形 。 当 这 两 个 图 形 出 现 
重症 部 分 时 , 问题 就 产生 了 : 这 两 个 图 形 该 如 何 重 盖 , 谁 在 上 谁 在 下 。 





globalCompositeOperation 属性 就 是 用 来 设置 这 种 重 半 方式 的 , E 
有 许多 种 属性 值 ， 每 种 属性 值 都 对 应 不 同 的 重 倒 效果 ， 可 以 根据 需要 








选择 适合 的 重 登 效果 。 
642 ”新 图 形 和 原 图 形 之 间 的 关系 w 


在 上 节 的 例子 中 ， 首 先 绘制 的 图 形 被 称 为 原 图 形 ， 后 面 绘制 的 图 形 被 称 为 新 图 形 。 在 Canvas 
关于 重生 的 关系 中 ， 有 一 部 分 就 是 围绕 着 新 图 形 和 原 图 形 之 间 的 关系 进行 的 。 

首先 , 可 以 设置 一 个 图 形 在 上 、 一 个 图 形 在 下 .在 Canvas 中 ,可 以 设置 globalCompositeOperation 
属性 为 destination-over 或 者 source-over， 分 别 表示 新 图 形 在 上 或 者 原 图 形 在 上 。 如 图 6-18 所 示 的 
图 像 显示 了 二 者 之 间 的 区 别 。 


图 6-18 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 
canvas{ 
border: 1px solid black; 
} 
</style> 
</head> 
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<body> 

canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 

var canvas = document.getElementByld("canvas"); 
var context = canvas.getContext("2d"); 
context.beginPath(); 
context.globalCompositeOperation = 'source-over'; 
context.fillStyle = "green"; 

context.fillRect(30, 30, 200, 150); 

context.fillStyle = "red"; 

context.arc(210, 180, 50, 0, Math.PI*2, true); 
context.fill() 

context.closePath(); 

</script> 

</body> 

</html> 


另外 一 组 效果 是 source-out 和 destination-out, 这 组 效果 如 图 
6-19 所 示 。 

在 这 种 效果 中 , 原 图 形 或 者 新 图 形 的 全 部 都 会 被 消除 , 只 
下 另 一 个 图 形 的 剩余 部 分 。 

此 外 ，destination-atop source-atop, destination-in, source-in 
属性 也 都 是 与 原 图 形 和 新 图 形 相关 的 ， 可 以 在 浏览 器 中 自行 测 
试 。 

64.3 ”加 色 处 理 


接 下 来 介绍 的 重合 效果 是 和 多 个 图 形 重合 部 分 相关 的 设 定 。 
lighter 属性 值 可 以 将 重 盖 部 分 做 加 色 处 理 ， 如 图 6-20 所 示 是 
lighter 属性 值 的 展现 效果 。 


6.5 图 像 处 理 








图 6-19 








图 6-20 


前 面 介绍 了 Canvas 中 的 图 形 绘制 ， 在 开发 过 程 中 ， 更 多 的 可 能 是 对 已 有 图 像 的 处 理 ，Canvas 


对 图 像 处 理 也 提供 了 丰富 的 方法 。 
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6.5.1 WEZ 


Canvas 中 提供 了 一 个 drawImage() 方 法 ， 用 来 进行 图 像 的 绘制 。drawImage() 方 法 可 以 传 入 三 个 
参数 ， 第 一 个 参数 是 这 个 图 像 对 应 的 img 对 象 ， 后 两 个 参数 定义 了 绘制 这 个 图 像 时 的 位 置 。 

如 何 定义 一 个 img 图 像 呢 ? 一 般 的 方法 是 在 JavaScript 中 使 用 Image() 方 法 初始 化 一 个 图 像 对 
象 ， 并 通过 这 个 初始 化 的 img 对 象 的 sre 属性 指定 对 应 图 像 的 目标 文件 。 

下 面 给 出 一 个 使 用 drawImage0 方 法 绘制 基本 图 像 的 例子 。 

【示例 】 

<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 

<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 

<style type = "text/css"> 

canvas í 

border: 1px solid black; 

D 

</style> 

</head> 

<body> 

<canvas id="canvas" width="500" height="500"></canvas> 

<script type = "text/javascript"> 

var canvas = document.getElementByld("canvas"); 

var context = canvas.getContext("2d"); 

var img = new Image(); 

img.src = "1.png"; 

img.onload = function () í 

context.drawImage(img, 100, 100); 

} 

</script> 

</body> 

</html> 

上 面 的 代码 成 功 地 绘制 出 了 目标 图 像 。 注 意 ， 我 们 为 img 对 象 添加 了 一 个 onload 方法 。 这 是 
非常 重要 的 ， 表 示 图 像 资源 加 载 成 功 之 后 再 进行 图 像 绘 制 。 如 果 不 加 onload 事件 ， 那 么 在 调用 
drawImage() 方 法 时 ， 可 能 并 没有 成 功 加 载 图 像 ， 以 致 绘制 图 像 失败 。 最 终 的 结果 就 是 界面 上 并 没 
有 图 像 显示 。 

drawImasge() 方 法 还 可 以 指定 要 绘制 的 图 像 的 宽度 和 高 度 ， 可 以 为 drawImage() 方 法 传 入 第 4 个 
和 第 5 个 参数 ， 分 别 表 示 要 绘制 图 像 的 宽度 和 高 度 。 


【示例 】 


<!DOCTYPE> 
<html> 
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<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 
canvas{ 
border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 
var canvas = document.getElementByld("canvas"); 
var context = canvas.getContext("2d"); 
var img = new Image(); 
img.src = "1.png"; 
img.onload = function () { 
context.drawlmage(img, 100, 100, 100, 100); 
} 
</script> 
</body> 
</html> 


上 面 的 代码 成 功 地 绘制 了 一 个 图 像 ， 并 且 图 像 是 100 像素 X100 像素 的 。 
drawImage0 方 法 还 有 第 三 种 初始 化 方法 ， 需 要 传 入 9 个 参数 ， 相 对 复杂 ， 但 是 功能 强大 。 这 

种 初始 化 方法 允许 开发 者 在 画布 的 任意 位 置 只 绘制 图 像 的 一 部 分 。 
drawImage() 方 法 需要 传 入 如 下 参数 。 

image: 图 像 对 象 。 

sx, sy: 源 图 像 的 复制 起 止 位 置 。 

sWidth, sHeight: 源 图 像 的 复制 宽 高 。 

dx、dy: Canvas 画布 上 绘制 图 像 的 起 止 点 坐标 。 

dWidth、dHeight: Canvas 画布 上 绘制 图 像 的 大 小 。 





sx、sy、sWidth、sHeight 这 4 个 参数 用 来 在 图 像 上 截取 要 绘制 的 部 分 。 dx、dy、dWidth、dHeight 
这 4 个 参数 用 来 指定 在 画布 上 绘制 图 像 的 位 置 和 图 像 的 大 小 。 下 面 来 看 一 个 使 用 这 种 初始 化 方法 绘 
制图 像 的 例子 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 


<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
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<style type = "text/css"> 
canvas{ 
border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="500" height="500"></canvas> 
<script type = "text/javascript"> 
var canvas = document.getElementByld("canvas"); 
var context = canvas.getContext("2d"); 
var img = new Image(); 
img.src = "1.png"; 
img.onload = function() í 
context.drawImage(img, 0, 0, 300, 300, 20, 20, 100, 100); 
; 
</script> 
</body> 
</html> 


效果 如 图 6-21 所 示 。 
这 种 初始 化 的 主要 目的 就 是 进行 图 像 部 分 的 绘制 ， A 


十 分 灵活 。 
652 ”图像 剪裁 


Canvas 的 图 像 剪 裁 原 理 是 通过 一 些 Canvas 中 的 图 


形 基本 方法 绘制 出 一 个 图 像 剪裁 路 径 , 然后 , 调用 Canvas 
API 中 的 clip() 方 法 进行 剪裁 。 下 面 给 出 一 个 使 用 clip0 图 6-21 
方法 进行 图 像 剪 裁 的 例子 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<style type = "text/css"> 

</style> 

</head> 

<body> 

<canvas id="canvas" width="500" height="500"></canvas> 

<script type = "text/javascript"> 

var canvas = document.getElementByld("canvas"); 

Var context = canvas.getContext("2d"); 
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var img = new Image(); 

img.src = "1.jpg"; 

img.onload = function() í 
context.drawImage(img, 0, 0, 300, 300); 

} 

context.beginPath(); 

context.arc(100, 100, 75, 0, Math.PI*2, true); 

context.closePath(); 

context.clip(); 

</script> 

</body> 

</html> 


在 上 面 的 代码 中 ， 首 先 使 用 之 前 介绍 的 图 像 引入 方法 引入 图 像 ， 接 下 来 使 用 正常 的 Canvas 路 
径 编辑 生成 一 个 Canvas 路 径 ， 从 beginPath() 到 closePath()， 使 用 arc0 方 法 绘制 了 一 个 圆 形 区 域 ; 
最 后 调用 clip() 方 法 进行 剪辑 。 图 6-22 所 示 是 剪辑 前 和 剪辑 后 的 图 像 展 示 效 果 。 








图 6-22 
利用 Canvas 中 的 clip0) 函 数 ， 结 合 基本 的 路 径 绘制 ， 可 以 剪裁 出 任意 形状 的 图 像 。 
6.5.3 ”像素 处 理 


之 前 介绍 的 图 像 处 理 技巧 都 是 宏观 上 的 ， 即 对 整个 图 像 进行 处 理 。Canvas 还 有 更 强大 的 功能 ， 
就 是 对 图 像 的 处 理 可 以 微观 到 像素 处 理 。 例 如 ， 生 成 原 图 像 的 反 色 图 像 、 黑 白 图 像 等 都 可 以 使 用 
Canvas 中 的 API 进行 操作 。 

首先 ， 绘 制 一 个 原 图 像 ， 接 着 调用 getImageData() 方 法 获取 Canvas 上 对 应 位 置 的 像素 ， 
getImageData() 方 法 会 返回 全 部 像素 ， 然 后 就 可 以 进行 像素 操作 了 。 最 后 ， 使 用 putImageData() 方 法 
将 处 理 后 的 图 像 输 出 到 Canvas 中 ， 就 完成 了 像素 处 理 和 绘制 的 过 程 。 下 面 给 出 一 个 例子 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 
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<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 

<style type = "text/css"> 

</style> 

</head> 

<body> 

<canvas id="canvas" width="500" height="500"></canvas> 

<script type = "text/javascript"> 

var canvas = document.getElementByld("canvas"); 

var context = canvas.getContext("2d"); 

var img = new Image(); 

img.src = "1.jpg"; 

img.onload = function() í 

context.drawImage(img, 0, 0, 300, 300); 

} 

var pixel = context.getImageData(0, 0, 300, 300); 

n = pixel.data.length; 

for (var i= 0; i <n; i+=4{ 
pixel.data[i + 0] = 255 - pixel.data[i + 0]: 
pixel.data[i + 1] = 255 - pixel.data[i + 1]: 
pixel.data[i + 2] = 255 - pixel.data[i + 2]: 

} 

context.putlmageData(pixel, 300, 300); 

</script> 

</body> 

</html> 


上 面 的 代码 首先 获取 了 界面 上 的 图 像 像素 信息 ， 然 后 遍历 每 一 个 像素 点 进行 操作 〈 这 里 是 反 
色 的 例子 ， 用 255 减 去 原 像 素 点 的 数值 ) ， 最 后 使 用 putImageData() 进 行 输出 。 


本 章 内 容 要 点 : 

* 基本 选择 器 

æ% class 选择 器 

k 元 素 选择 器 

CSS 提供 了 丰富 的 样式 设 定 方法 ， 通 过 这 些 方法 可 以 为 元 素 添 加 各 种 各 样 的 样式 效果 甚至 动 
画 效果 。 然 而 ， 在 这 之 前 最 重要 的 是 ， 如 何 获取 想 要 设 定 样式 的 元 素 。CSS 中 的 选择 器 就 是 这 样 
的 作用 ， 使 用 CSS 选择 器 可 以 获取 任何 DOM 中 想 获取 的 节点 。 选 择 器 相当 于 通 往 CSS 的 大 门 ， 
灵活 掌握 了 选择 器 的 使 用 才能 开始 对 元 素 CSS 样式 进行 设 定 。 


7.1 基本 选择 器 





7.1.1 id 选择 器 


id 选择 器 ， 顾 名 思 义 ， 就 是 根据 元 素 的 id 属性 值 获取 元 素 。 在 HTML 中 ,每 一 个 元 素 节点 都 
可 以 指定 id 属性 ， 然 后 就 可 以 通过 CSS 中 的 id 选择 器 获取 这 个 元 素 了 。 
在 CSS 中 ， 在 “# ”后 面 加 上 选取 元 素 的 id 属性 值 来 表示 选取 对 应 的 元 素 。 下 面 使 用 id 选择 
器 来 获取 某 一 个 元 素 并 为 其 设 定 一 些 CSS 样式 。 
【示例 】 
<!DOCTYPE> 
<html> 
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<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
#test{ 
width: 100px; 
height: 100px; 
background: green; 
border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<div id="test"></div> 
</body> 
</html> 


在 上 面 的 例子 中 ， 使 用 #test 获取 id 值 设 定 为 test 的 元 素 ， 并 为 其 设 定 了 一 些 CSS 属性 。 
id 属性 和 元 素 节 点 的 标签 名 是 什么 没有 关系 的 。 不 论 是 什么 样 的 标签 元 素 ， 设 定 了 id 


SA 值 后 都 会 进行 统一 处 理 。 


在 很 多 情况 下 ， 元 素 的 id 属性 是 为 了 在 JavaScript 脚本 中 获取 元 素 ， 而 很 少 在 CSS 中 获取 元 


素 。 一 般 情 况 下 ， 在 CSS 中 获取 元 素 都 使 用 class 选择 器 。 


T: 


1 


.2 class 选择 器 


和 id 选择 器 类 似 ，class 选择 器 根据 元 素 的 class 属性 值 获取 元 素 。CSS 中 的 class 选择 器 使 用 . 


加 上 元 素 的 class 属性 值 获取 对 应 的 元 素 ， 下 面 给 出 一 个 比较 基本 的 例子 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
„test{ 
width: 100px; 
height: 100px; 
background: green; 
border: 1px solid black; 
} 
</style> 
</head> 
<body> 
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<div class="test"></div> 
</body> 
</html> 


在 上 面 的 例子 中 ， 使 用 .test 获取 到 class 属性 值 为 test 的 div 元 素 ， 并 为 其 设 定 了 CSS 样式 。 

在 HTML 中 ，id 属性 与 class 属性 的 区 别 在 于 ， 在 一 个 HTML 文档 中 同一 个 id 属性 值 应 该 是 
唯一 的 , 但 可 以 有 多 个 元 素 的 class 属性 值 是 相同 的 .id 属性 表示 某 一 个 元 素 是 独一无二 的 , 而 class 
属性 表示 某 一 个 元 素 属 于 某 一 类 。 在 一 个 HTML 文档 中 ， 虽 然 定义 多 个 id 属性 值 相 同 的 元 素 ， 程 
序 也 不 会 报错 ， 但 是 这 会 导致 很 多 问题 ， 因 此 建议 不 要 这 么 做 。 

class 选择 器 是 最 常用 、 最 重要 的 CSS 选择 器 ， 一 般 情况 下 ， 定 义 某 个 元 素 的 样式 全 靠 class 
选择 器 ， 因 为 class 选择 器 相对 来 说 比较 灵活 。 在 一 个 HTML 文档 中 ， 可 以 有 多 个 元 素 设 定 相同 的 
class 属性 值 ， 同 一 个 元 素 也 可 以 设 定 多 个 不 同 的 class 属性 值 ， 这 为 定义 不 同 元 素 的 CSS 样式 提供 
了 很 大 的 便利 。 下 面 列 举 一 些 在 开发 中 经 常 遇 到 的 情景 ， 以 体会 class 选择 器 的 灵活 使 用 技巧 。 


(1) 几 个 不 同 的 元 素 ， 具 有 一 些 公共 样式 ， 但 是 又 有 差别 。 
现在 考虑 一 个 问题 : 需要 在 界面 上 定义 多 个 div 元 素 ， 这 些 元 素 的 大 小 都 是 一 样 的 ， 只 有 颜色 
不 一 样 。 第 一 种 写法 可 能 是 下 面 这 样 的 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
.red{ 
display: inline-block; 
width: 100px; 
height: 100px; 
margin-right: 20px; 
background: red; 
h 
-green( 
display: inline-block; 
width: 100px; 
height: 100px; 
margin-right: 20px; 
background: green; 
} 
.pink{ 
display: inline-block; 
width: 100px; 
height: 100px; 
margin-right: 20px; 
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background: pink; 
b 
.black{ 
display: inline-block; 
width: 100px; 
height: 100px; 
margin-right: 20px; 
background: black; 
h 
blue í 
display: inline-block; 
width: 100px; 
height: 100px; 
margin-right: 20px; 
background: blue; 
; 
</style> 
</head> 
<body> 
<div class="red"></div> 
<div class="green"></div> 
<div class="pink"></div> 
<div class="black"></div> 
<div class="blue"></div> 
</body> 
</html> 


在 上 面 的 代码 中 ， 为 每 一 个 div 元 素 设 定 了 一 个 class 





属性 ， 并 通过 CSS 中 的 类 选择 器 获取 这 


些 元 素 ， 分 别 为 它们 设 定 CSS 样式 ， 这 种 做 法 可 以 完成 之 前 的 需求 。 
这 样 的 代码 有 很 多 宛 余 的 地 方 ， 因 为 每 个 元 素 都 有 一 些 相同 的 CSS 属性 。 其 实 ， 完 全 可 以 将 
这 些 元 余 的 代码 删 掉 ， 只 要 为 每 个 div 元 素 添加 一 个 相同 的 class 即 可 ， 请 看 下 面 的 例子 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 


<style type="text/css"> 
normal í 
display: inline-block; 
width: 100px; 
height: 100px; 
margin-right: 20px; 
| 





Ted{ 
background: red; 
h 
-green( 
background: green; 
} 
.pink{ 
background: pink; 
; 
.black{ 
background: black; 
} 
.blue{ 
background: blue; 
} 
</style> 
</head> 
<body> 
<div class="normal red"></div> 
<div class="normal green"></div> 
<div class="normal pink"></div> 
<div class="normal black"></div> 
<div class="normal blue"></div> 
</body> 
</html> 


上 面 的 代码 为 每 个 元 素 都 添加 了 一 个 normal 类 ， 用 来 定义 元 素 公共 的 样式 ， 极 大 地 精简 了 代 
码 。 在 开发 过 程 中 ， 为 了 完成 这 样 的 需求 而 给 元 素 指定 多 个 class 类 是 很 常见 的 。 


(2) 用 class 选择 器 覆盖 的 方法 设 定 元 素 样式 
考虑 这 样 一 个 问题 : 如 果 一 个 元 素 被 设 定 了 两 个 class 





属性 值 ， 而 这 两 个 class 属性 值 的 某 些 


CSS 样式 定义 重复 了 ， 那 么 最 终 的 样式 是 什么 样 的 呢 ? 来 看 下 面 的 例子 。 


【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 


<style type="text/css"> 
.redí 
display: inline-block; 
width: 100px; 
height: 100px; 
margin-right: 20px; 
background: red; 
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} 
.blue{ 
background: blue; 

} 
</style> 
</head> 
<body> 
<div class="red blue"></div> 
</body> 
</html> 


上 面 的 例子 为 一 个 div 元 素 添 加 了 两 个 class 属性 ， 这 两 个 属性 在 对 背景 色 的 设 定 上 出 现 了 冲 
突 。 打 开 浏 览 器 查看 效果 ， 发 现 元 素 的 背景 颜色 被 设 定 成 了 蓝 色 。 

HK, class 属性 出 现 冲 突 时 ， 元 素 样式 的 设 定 标准 是 按照 这 些 选 择 器 在 CSS 中 声明 的 顺序 进 
行 履 盖 的 。 也 就 是 说 ， 在 上 面 的 例子 中 ，blue 选择 器 声明 在 red 选择 器 之 后 ， 因 此 在 相同 的 属性 设 
JE (background) 部 分 中 blue 的 属性 值 覆盖 了 red 的 属性 值 ， 导 臻 最 后 的 结果 是 元 素 的 背景 色 被 设 
定 成 了 蓝 色 。 

利用 这 个 特性 也 可 以 帮助 开发 者 在 开发 的 过 程 中 节约 一 定 的 代码 量 ， 优 化 代码 。 比 如 ， 现 在 
要 求 界面 上 有 多 个 div 完全 相同 ， 但 有 一 个 div 元 素 处 于 某 种 特别 的 状态 ， 背 景 颜色 和 其 他 不 同 。 
可 以 利用 上 一 个 场景 中 讲 到 的 方法 ， 代 码 如 下 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
.normal{ 
display: inline-block: 
width: 100px; 
height: 100px; 
margin-right: 20px; 
; 
.green{ 
background: green; 
} 
blue í 
background: blue; 
} 
</style> 
</head> 
<body> 


<div class="normal green"></div> 
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<div class="normal green"></div> 
<div class="normal green"></div> 
<div class="normal blue"></div> 
<div class="normal green"></div> 
</body> 


</html> 


这 种 方式 可 以 完成 需求 ， 但 是 可 以 发 现 HTML 中 多 个 元 素 定义 了 同样 的 class。 如 果 使 用 刚才 
讲 到 的 方式 ， 就 可 以 省 略 这 些 不 必要 的 类 名 了 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
.normalf 
display: inline-block; 
width: 100px; 
height: 100px; 
margin-right: 20px; 
background: green; 
} 
.active{ 
background: blue; 
; 
</style> 
</head> 
<body> 
<div class="normal"></div> 
<div class="normal"></div> 
<div class="normal"></div> 
<div class="normal active"></div> 
<div class="normal"></div> 
</body> 
</html> 


通过 改写 ， 不仅 让 HTML 代码 变 得 更 加 简洁 ， 还 减少 了 类 的 元 余 定义 ， 同 时 也 让 CSS 代码 的 
含义 更 加 明确 了 。 


7.1.3 元素 选择 器 


元 素 选择 器 指 的 是 直接 通过 元 素 标签 的 名 称 选择 元 素 ， 这 样 选 择 一 般 会 选择 到 多 个 元 素 。 元 
素 选择 器 不 用 添加 任何 前 缀 ， 在 CSS 代码 中 直接 使 用 标签 名 即 可 。 
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【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width. initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
div{ 
width: 100px; 
height: 100px; 
display: inline-block; 
background: black; 
; 
pt 
width: 200px; 
height: 200px; 
background: green; 
} 
</style> 
</head> 
<body> 
<div></div> 
<div></div> 
<p></p> 
</body> 
</html> 


在 上 面 的 代码 中 ， 通 过 元 素 选择 器 为 整个 HTML 文档 中 所 有 的 div 元 素 和 p 元 素 添加 了 不 同 
的 样式 。 

单独 的 标签 选择 器 很 少 被 用 到 ， 但 是 在 与 其 他 选择 器 进行 组 合 的 时 候 会 出 现 很 强大 的 功能 。 
下 面 将 要 介绍 的 内 容 就 是 如 何 灵 活 组 合 上 面 讲 到 的 几 种 选择 器 。 


72 基本 选择 器 综合 使 用 


724 选择 器 的 藤 套 

基本 选择 器 之 间 可 以 进行 嵌 套 使 用 ， 以 获取 开发 者 想 要 的 元 素 。 这 种 嵌 套 的 含义 是 ， 为 已 经 
可 以 选择 出 元 素 的 选择 器 再 加 一 层 或 几 层 限制 ， 从 而 选取 到 范围 更 小 的 元 素 。 

【示例 】 


<!DOCTYPE> 
<html> 
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<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width. initial-scale=1, maximum-scale=1"/> 

<style type="text/css"> 

</style> 

</head> 

<body> 

<div class="main"> 
<p>main</p> 
<p>main</p> 
<p>main</p> 

</div> 

<div class="footer"> 
<p>footer</p> 
<p>footer</p> 
<p>footer</p> 

</div> 

</body> 

</html> 


在 上 面 这 段 代码 中 ， 有 两 个 div TR, 它们 内 部 都 有 一 些 p 元素 。 思考 一 下 ， 如 何 分 别 为 这 些 
p 元 素 设 定 不 同 的 样式 呢 ? 也 就 是 说 ，main 元 素 中 的 p 元素 样式 统一 ，footer 元 素 中 的 p 元 素 样式 
统一 ， 并 且 二 者 之 间 的 样式 不 同 。 

在 CSS 中 ， 可 以 使 用 多 个 选择 器 嵌 套 的 形式 来 获取 元 素 。 有 具体 来 说 ， 比 如 .test p 选择 器 表示 
的 就 是 选择 class 名 为 test 内 部 的 所 有 p 元 素 。 当 然 ， 也 可 以 使 用 div p 表示 选择 div 元 素 内 部 的 所 
有 Pp 元 素 。 利 用 这 个 方法 改写 上 面 的 代码 ， 实 现 功能 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
.main pí 
width: 50px; 
height: 50px; 
background: green; 
display: inline-block; 
} 
„footer p{ 
width: 100px; 
height: 100px; 
background: red; 


106 | HTML5+jQuery Mobile 移动 应 用 开发 





display: inline-block; 

} 

</style> 

</head> 

<body> 

<div class="main"> 
<p>main</p> 
<p>main</p> 
<p>main</p> 

</div> 

<div class="footer"> 
<p>footer</p> 
<p>footer</p> 
<p>footer</p> 

</div> 

</body> 

</html> 


打开 浏览 器 查看 效果 ， 如 图 7-1 所 示 。 


图 7-1 


通过 这 种 选择 器 嵌 套 的 方式 成 功 地 为 不 同 元 素 内 部 的 特定 元 素 设 定 了 不 同 的 样式 。 
考虑 下 面 这 种 相对 复杂 的 HTML 结构 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 








<style type="text/css"> 
</style> 

</head> 

<body> 

<div class="main"> 
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<p>main</p> 
<p>main</p> 
<p>main</p> 
<div class="content"> 
<p>content</p> 
</div> 
</div> 
<div class="footer"> 
<p>footer</p> 
<p>footer</p> 
<p>footer</p> 
<div class="content"> 
<p>content</p> 
</div> 
</div> 
</body> 
</html> 


与 之 前 的 代码 不 同 的 是 ， 这 次 的 主 div 元 素 内 部 的 结构 相对 复杂 了 。 以 第 一 个 为 例 ， 除 了 三 个 
p 标签 元 素 外 ， 内 部 还 添加 了 一 个 类 名 为 content 的 p 标签 ， 这 个 p 标签 暂时 可 以 认为 是 显示 主要 
文章 内 容 的 部 分 。 现 在 的 需求 是 ， 要 给 外 层 的 三 个 p 标签 设 定 不 同 的 样式 ， 但 是 不 能 改变 content 
部 分 的 p 标签 样式 。 

如 果 使 用 之 前 的 方式 设 定 样式 ， 不 但 会 使 得 三 个 标签 的 样式 被 设 定 ， 而 且 content 部 分 的 p 标 
签 也 一 样 被 设 定 了 不 同 的 样式 。 当 然 ， 可 以 通过 CSS 覆盖 来 恢复 content 部 分 p 元 素 的 样式 , 但 是 
效率 很 低 ， 增 加 了 一 些 无 用 代码 量 的 开销 。 

CSS 中 还 有 一 种 元 素 嵌 套 的 方法 ，element > element。 比 如 ，.test> p 表示 的 就 是 选择 父 元 素 类 
名 为 test 的 所 有 p 元 素 。 注 意 这 个 选择 器 和 之 前 讲 到 的 选择 器 的 区 别 。 之 前 介绍 的 选择 器 选择 的 是 
某 个 元 素 内 部 所 有 符合 要 求 的 元 素 , 不 管 它们 之 间 是 不 是 直接 的 父子 关系 。 这 个 选择 器 选取 的 只 能 
是 直接 的 子 元 素 ， 而 不 包括 其 他 更 底层 的 子 元 素 。 以 上 面 的 场景 为 例 ，.main p 选取 的 是 main 元 素 
下 的 所 有 元素， 而 .main > p 选取 的 是 main 元 素 下 外 层 的 几 个 p 元 素 ， 不 包括 content 的 p 元 素 。 

下 面 补 全 代码 ， 实 现 功 能 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
-main > pí 
width: 50px; 
height: 50px; 
background: green; 
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display: inline-block; 

} 

.footer > p{ 
width: 100px; 
height: 100px; 
background: red; 
display: inline-block; 

} 

</style> 

</head> 

<body> 

<div class="main"> 
<p>main</p> 
<p>main</p> 
<p>main</p> 
<div class="content"> 

<p>content</p> 

</div> 

</div> 

<div class="footer"> 
<p>footer</p> 
<p>footer</p> 
<p>footer</p> 
<div class="content"> 

<p>content</p> 

</div> 

</div> 

</body> 

</html> 


上 面 的 代码 就 实现 了 我 们 想 要 的 功能 。 在 进行 CSS 样式 编写 的 时 候 ， 如 果 HTML 结构 相对 复 
杂 ， 一 定 要 清楚 地 认识 到 自己 想 要 获取 的 元 素 的 关系 ， 这 样 才能 正确 使 用 CSS 中 的 选择 器 获取 想 
要 的 元 素 。 

除了 上 面 介绍 的 两 种 选择 器 之 外 ，CSS 还 有 一 个 选择 器 可 以 选择 紧 跟 在 某 个 元 素 后 面 的 元 素 
的 选择 器 。 例 如 ，.test + p 表示 的 是 选择 类 名 为 test 的 元 素 后 面 紧 跟着 的 所 有 p 元 素 。 为 了 形象 地 
理解 这 个 选择 器 ， 来 看 一 下 下 面 的 例子 。 

【示例 】 

<!DOCTYPE> 

<html> 

<head> 

<meta charSet= "utf-8" > 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

<style type="text/css"> 


第 7 章 CSS 选择 器 | 109 





-main + p{ 
width: 50px; 
height: 50px; 


background: green; 
display: inline-block; 


} 

„footer + p{ 
width: 100px; 
height: 100px; 
background: red; 


display: inline-block; 


} 

</style> 

</head> 

<body> 

<div class="main"> 
<p>main</p> 
<p>main</p> 
<p>main</p> 


<div class="content"> 
<p>content</p> 


</div> 
</div> 
<p>after</p> 


<div class="footer"> 


<p>footer</p> 
<p>footer</p> 
<p>footer</p> 


<div class="content"> 
<p>content</p> 


</div> 
</div> 
<p>after</p> 
</body> 
</html> 


使 用 该 选择 器 可 以 获取 div 元 素 后 面 紧 跟着 的 p 元素， 而 没有 选择 div 元 素 内 部 的 p 元 素 , 成 


功 完成 了 之 前 的 需求 。 


722 ”基本 选择 器 优先 级 问题 





之 前 介绍 了 三 种 


最 基本 的 选择 器 ， 分 别 是 id 选择 器 、class 选择 器 、 元 素 选择 器 。 考 虑 这 样 一 


种 情况 ， 如 果 这 三 种 选择 器 设 定 了 不 同 的 样式 ， 而 且 指 向 了 HTML 文档 中 的 同一 个 元 素 ， 那 么 这 
个 元 素 的 表现 形式 是 什么 样 的 呢 ? 
在 CSS 中 ， 这 三 种 基本 选择 器 是 有 优先 级 顺序 的 。 它 们 的 优先 级 顺序 为 ，id 选择 器 >class 选 
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择 器 > 元 素 选 择 器 。 也 就 是 说 ， 如 果 这 三 种 选择 器 同时 为 某 一 个 元 素 设 定 样式 ， 那 么 冲突 的 部 分 按 


照 上 面 的 顺序 依次 决定 。 下 面 
【示例 】 
<!DOCTYPE> 
<html> 


<head> 
<meta charSet="utf-8" > 


给 出 一 个 例子 。 


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 


<style type="text/css"> 
div{ 
width: 100px; 
height: 100px; 
background: red; 
; 
„container { 
border: 1px solid black; 
background: black; 
} 
#main{ 
background: green; 
Ü 
</style> 
</head> 
<body> 


<div id="main" class="container"></div> 


</body> 
</html> 


上 面 的 代码 中 ， 选 择 器 div. container. #main 都 指向 了 同一 个 元 素 ， 并 且 这 三 个 选择 器 都 为 


元 素 设 定 了 不 同 的 background 





属性 。 打 开 浏览 器 查看 效果 ， 就 会 发 现 元 素 最 终 的 颜色 为 绿色 。 也 


就 是 说 ， 在 这 三 个 选择 器 同时 作用 于 某 一 个 元 素 的 时 候 ，id 选择 器 优先 。 如 果 id 选择 器 中 没有 指 
定 的 属性 ， 就 可 以 按照 其 他 选择 器 指定 的 属性 进行 设 定 了 。 

考虑 下 面 的 一 种 情境 ， 使 用 这 种 选择 器 的 优先 级 就 很 方便 : 当 页 面 中 有 一 些 span 标签 时 ， 想 
让 某 一 个 span 标签 和 其 他 的 span 标签 与 众 不 同 ， 就 可 以 只 为 这 个 span 标签 添加 一 个 class 名 ， 其 
他 span 标签 使 用 统一 的 样式 即 可 。 


72.3 ”同时 设 定 多 个 元 素 样式 


在 CSS 中 ， 可 以 同时 为 多 个 选择 器 设 定 相同 的 样式 ， 只 要 在 这 些 选择 器 之 间 使 用 逗号 分 隔 开 
就 可 以 了 。 下 面 的 例子 同时 设 定 了 多 个 选择 器 的 样式 。 


【示例 】 


<!DOCTYPE> 
<html> 
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<head> 
<meta charSet="utf-8" > 
<meta name="viewport" content= "width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
.Container, pí 

width: 100px; 

height: 100px; 

border: 1px solid black; 
} 
</style> 
</head> 
<body> 
<div class="container"></div> 
<p></p> 
</body> 
</html> 


7.3” 伪 类 选择 器 


在 CSS 中 ,还 有 这 样 一 种 选择 器 ， 它 们 通过 为 基本 选择 器 添加 :后 级 来 实现 选择 器 中 一 些 更 高 
级 的 功能 。 


734 ”状态 选择 器 


在 一 个 HTML 文档 中 可 能 会 出 现 一 些 表单 input 输入 框 、 超 链接 a 标签 等 。 这 种 类 似 的 标签 都 
会 存在 状态 。 例 如 ， 一 个 input 输入 框 最 开始 可 能 处 于 普通 状态 ， 当 用 户 单 击 这 个 input 输入 框 之 
后 ， 输 入 框 变 成 了 获取 焦点 的 状态 。 超 链接 a 标签 也 是 如 此 ， 单 击 a 标签 后 ，a 标签 变 成 已 跳 转 状 
态 等 。CSS 中 有 一 类 选择 器 就 是 这 样 的 作用 ， 它 们 可 以 为 元 素 的 不 同 状态 设 定 不 同 的 样式 ， 比 如 a 
标签 在 单 击 后 是 什么 样式 或 者 一 个 input 标签 在 选中 后 是 什么 样式 等 。 


1. :link 


:link 选择 器 用 在 a 标签 中 ，a:link 选中 的 就 是 当前 页 面 中 所 有 未 访问 的 a 标签 ， 也 就 是 初始 状 
态 的 标签 。 通 过 a:link， 可 以 为 这 些 元 素 设 定 样式 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" > 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 

a:link{ 
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color: red; 
} 
</style> 
</head> 
<body> 
<a hre 全 "www.baidu.com"> 跳 转 </a> 
<a href="www.baidu.com"> 跳 转 </a> 
<a href="www.baidu.com"> 跳 转 </a> 
</body> 
</html> 


打开 浏览 器 可 以 看 到 ,所 有 a 标签 最 初 的 样式 都 是 红色 的 , 这 是 因为 在 CSS 代码 中 使 用 a:link 
为 所 有 未 被 单 击 的 a 标签 设 定 了 统一 的 字体 颜色 。 


2. :hover 


:hover 表示 一 个 元 素 在 被 鼠标 滑 过 时 的 状态 。 任 何 元 素 都 可 以 使 用 :hover 设 定 鼠 标 滑 过 时 的 状 
态 。 注 意 ， 这 个 选择 器 在 移动 端 H5 开发 时 基本 不 会 用 到 ， 因 为 手机 屏幕 上 不 存在 鼠标 滑 过 这 个 状 
态 ， 即 使 是 用 户 单 击 了 某 个 元 素 ， 也 不 会 触发 滑 过 状态 设 定 的 CSS 样式 。 

下 面 接着 上 面 的 例子 为 标签 在 鼠标 滑 过 时 的 样式 进行 设 定 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
a:link{ 
color: red; 
; 
a:hover{ 
color: green; 
} 
</style> 
</head> 
<body> 
<a href="#'> 跳 转 </a> 
<a href="www.baidu.com"> 跳 转 </a> 
<a href="www.baidu.com"> 跳 转 </a> 
</body> 
</html> 


打开 浏览 器 ， 当 鼠标 滑 过 超 链接 时 这 些 超 链接 的 颜色 变 成 了 a:hover 选择 器 中 设置 成 的 绿色 。 
当 鼠 标 滑 出 超 链接 时 ， 超 链接 又 变 回 原来 的 颜色 。 
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3. :visited 

:visited 选择 器 也 是 专门 应 用 于 a 标签 的 ， 用 来 指定 那些 已 经 被 访问 过 的 超 链 接 标签 。 在 上 面 
的 例子 中 ， 当 单 击 某 一 个 链接 后 再 返回 ， 刷 新 页 面 ， 就 会 发 现 刚 才 单 击 过 的 a 标签 的 颜色 发 生 了 变 
化 ， 这 其 实 就 是 浏览 器 为 单 击 过 的 a 标签 设 定 的 默认 样式 。 这 里 ， 可 以 使 用 :visited 选中 这 些 被 访 
问 过 的 元 素 并 修改 它们 的 样式 。 

【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
a:link{ 
color: red; 
} 
a:hover{ 
color: green; 
; 
a:visitedí 
color: yellow; 
; 
</style> 
</head> 
<body> 
<a href="#'> 跳 转 </a> 
<a href="www.baidu.com"> 跳 转 </a> 
<a href="www.baidu.com"> 跳 转 </a> 
</body> 
</html> 


打开 浏览 器 ， 可 以 发 现 选中 某 一 个 a 标签 后 再 刷新 界面 ， 这 些 被 访问 过 的 标签 的 颜色 变 成 了 
黄色 ， 也 就 是 之 前 通过 :visited 设置 的 颜色 。 

4. :active 

:active 选择 器 也 是 专门 针对 a 标签 的 , 当 某 个 元 素 处 于 活动 状态 时 , 选择 器 就 会 选中 这 个 元 素 。 
什么 叫 作 处 于 活动 状态 呢 ? 简单 地 说 ， 就 是 用 鼠标 单 击 这 个 元 素 并 且 还 没 释放 ， 这 个 元 素 就 可 以 
被 :active 选择 器 选中 。 

【示例 】 


<!DOCTYPE> 
<html> 
<head> 
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<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
a:link{ 
color: red; 
} 
a:hover{ 
color: green; 
} 
a:visitedí 
color: yellow; 
} 
a:active{ 
color: pink; 
} 
</style> 
</head> 
<body> 
<a href="#"> 跳 转 </a> 
<a href="www.baidu.com"> 跳 转 </a> 
<a href="www.baidu.com"> 跳 转 </a> 
</body> 
</html> 


单 击 某 一 个 超 链 接 按 钮 时 ， 元 素 的 颜色 变 成 粉色 ， 这 就 是 :active 选择 器 的 作用 。 
上 面 4 个 选择 器 都 和 a 标签 息息相关 ， 这 里 再 总 结 一 下 它们 选择 的 元 素 。 


© hover: 选择 鼠标 滑 过 的 超 链接 元 素 。 

o active: 选择 鼠标 单 击 中 的 超 链接 元 素 。 

° ilink: 选择 未 被 访问 的 超 链接 元 素 。 

@ :visited: 选择 已 经 被 访问 过 的 超 链接 元 素 。 
5. :focus 


:focus 也 是 一 个 基于 元 素 状态 选择 的 选择 器 , 但 是 和 之 前 的 不 同 ,:focus 选 择 器 专门 应 用 于 input 
元 素 , 表示 的 是 某 个 input 元 素 被 选中 的 情况 。 比 如 , 页 面 上 有 一 些 input 表单 ， 当 单 击 某 一 个 input 
元 素 使 之 能 够 进行 文本 输入 时 就 表示 这 个 元 素 是 被 激活 的 状态 。 下 面 的 例子 为 激活 的 input 元 素 设 
置 和 其 他 普通 input 元 素 不 同 的 样式 。 

【示例 】 

<!DOCTYPE> 

<html> 

<head> 


<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
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<style type="text/css"> 
inputí 
width: 100px; 
height: 25px; 
J: 
input:focusí 
width: 150px; 
height: 25px; 
} 
</style> 
</head> 
<body> 
<form> 
<input type="text" placeholder=" 用 户 名 "/> 
<input type="password" placeholder=" 密 码 "> 
</form> 
</body> 
</html> 


当 单 击 一 个 input 标签 时 ， 这 个 input 标签 变 为 激活 状态 ， 因 此 样式 会 变 宽 ,i 
器 的 功能 。 
结合 CSS 动画 效果 ， 使 用 选择 器 还 可 以 实现 一 些 更 好 的 效果 ， 请 看 下 面 的 例子 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 





是 :focus 选择 





<style type="text/css"> 
input{ 
width: 250px; 
height: 25px; 
padding-left: 20px; 
} 
input:focus{ 
transition: all .5s; 
padding-left: 80px; 
b 
</style> 
</head> 
<body> 
<form> 
<input type="text" placeholder=" 用 户 名 "> 
<input type="password" placeholder=" 密 码 "> 
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</form> 
</body> 
</html> 


打开 浏览 器 ， 查 看 一 下 效果 。 短 短 几 行 代码 就 可 以 完成 一 个 很 强 的 交互 效果 。 
6. :enabled 和 :disabled 


:enabled 选择 器 和 :disabled 选择 器 都 适用 于 input 元 素 , 分 别 用 来 选取 启用 的 和 禁用 的 input 元 
素 。 禁 用 的 input 标签 对 应 的 是 被 设置 了 disabled 属性 的 input 元 素 。 如 果 没 有 设置 disabled 属性 ， 
那么 这 个 input 标签 就 是 启用 的 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
input:enabled í 
width: 200px; 
height: 30px; 
background: white; 
} 
input:disabled{ 
width: 300px; 
height: 30px; 
background: red; 
1 
</style> 
</head> 
<body> 
<input type="text" placeholder=" 启 用 "/> 
<input type="text" placeholder=" 禁 用 " disabled/> 
</body> 
</html> 


在 上 面 的 代码 中 ， 为 启用 的 input 元 素 设 定 背景 颜色 白色 、 禁 用 的 input 元 素 设 定 背景 颜色 
红色 。 
7.3.2 :before 和 :after 

:before 和 :after 这 两 个 伪 类 选择 器 非常 常用 ， 在 一 般 的 网 页 上 经 常会 见 到 这 两 个 伪 类 。 这 两 个 
伪 类 的 使 用 非常 灵活 ， 可 以 实现 很 多 复杂 的 效果 或 者 解决 许多 CSS 问题 。 

:before 表示 在 一 个 元 素 之 前 添加 一 个 元 素 ， 而 :after 表示 在 一 个 元 素 之 后 添加 一 个 元 素 ， 并 且 
可 以 通过 CSS 为 这 些 元 素 设 定 样式 。 下 面 是 一 个 最 基本 的 用 法 。 
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【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 


<meta name="viewport" content="width=device-width. initial-scale=1, maximum-scale=1"/> 


<style type="text/css"> 
.main{ 
width: 200px; 
height: 200px; 
background: green; 


} 
.main:before{ 
width: 10px; 
height: 10px; 
display: block; 
background: blue; 
content: "; 
; 
.main:after{ 
width: 10px; 
height: 10px; 
display: block; 
background: red; 
content: "; 
; 
</style> 
</head> 
<body> 
<form> 
<div class="main"></div> 
</form> 
</body> 
</html> 


通过 上 面 的 方式 就 可 以 为 main 元 素 添加 一 个 前 面 和 一 个 后 面 的 
伪 类 ,并 为 它们 定义 一 些 基 本 样式 。 注意，content 属性 表示 设置 :after 
或 者 :before 伪 类 的 内 容 ， 这 个 属性 必须 要 指定 。 如 果 指 定 的 是 一 个 文 
本 ， 这 段 文 本 内 容 就 会 当 作 HTML 文本 显示 在 这 个 伪 类 中 。 即 便 不 
想 在 伪 类 元 素 内 部 显示 元 素 ， 也 需要 指定 一 个 空 的 字符 串 ， 和 否则 伪 类 
元 素 不 会 被 显示 。 

打开 浏览 器 控制 台 , 为 main 元 素 添加 了 after 和 before 伪 类 后 的 
结构 如 图 7-2 所 示 。 











P <head>..</head> 
Y <body> 
Y <div class="main"> 
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可 以 为 before 和 after 元 素 设 定 各 种 各 样 的 属性 来 满足 需求 ， 包 括 定位 、 颜 色 、 形 状 等 。 

考虑 这 样 一 个 需求 : 我 们 需要 制作 一 个 展示 框 ， 展 示 框 的 右上 角 要 有 一 个 关闭 按钮 。 

刚 看 这 个 需求 可 能 觉 着 没什么 难度 ， 只 要 用 三 个 div 元 素 即 可 完成 。 如 果 使 用 伪 类 ， 只 需要 一 
个 div 元 素 即 可 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
.main{ 
width: 300px; 
height: 100px; 
background: rgba(0, 0, 0, .5); 


margin-top: 100px; 
} 
.main:before{ 

width: 50px; 


height: 18px; 
display: block; 
background: black; 
content: ' 关 闭 '; 
line-height: 18px; 
font-size: 14px; 
color: white; 
text-align: center; 
position: relative; 
left: 250px; 
top: -18px; 
; 
</style> 
</head> 
<body> 
<div class="main"></div> 
</body> 
</html> 


打开 浏览 器 ， 效 果 如 图 7.3 所 示 。 
这 里 的 关键 就 在 于 对 伪 类 样式 的 设 定 。 不 要 把 :after 和 :before 伪 类 想 得 太 复杂 ， 其 实 这 两 个 伪 

类 也 是 元 素 ,只 不 过 它们 和 主体 元 素 绑 定 在 一 起 ， 形 成 了 一 个 整体 。 上 面 对 伪 类 元 素 样式 的 设 定 包 

括 颜色 、 位 置 、 字 体 等 ， 按 照 需求 进行 设 定 就 可 以 让 伪 类 元 素 和 其 他 元 素 一 样 进行 效果 展现 了 。 
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图 7-3 
如 果 不 使 用 伪 类 而 使 用 普通 的 方法 ， 代 码 可 能 是 下 面 这 样 的 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 


<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
.main{ 
width: 300px; 
1 
.Content{ 
width: 300px; 
height: 100px; 
background: rgba(0, 0, 0, .5); 
position: relative; 


} 
.closef 
position: relative; 
width: 50px; 
height: 18px; 
display: block; 
background: black; 
line-height: 18px; 
font-size: 14px; 
color: white; 
text-align: center; 
left: 250px; 
b 
</style> 
</head> 
<body> 


<div class="main"> 
<div class="close"> 关 闭 </div> 
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<div class="content"></div> 
</div> 
</body> 
</html> 


可 以 看 到 ， 二 者 的 HTML 代码 结构 的 清晰 程度 相差 很 大 ， 并 且 后 者 会 使 用 更 多 的 CSS 代码 和 
更 多 的 类 定义 , 提升 了 代码 整体 的 复杂 度 。 最 重要 的 一 点 是 , 前 者 较 后 者 而 言 , 代码 的 维护 性 更 高 ， 
而 且 整 个 元 素 被 当成 了 一 个 整体 ， 方 便 复 用 。 


74 位 置 选择 器 


有 一 类 伪 类 选择 器 ， 它 们 可 以 选择 一 批 元 素 中 的 某 一 个 元 素 。 这 类 选择 器 可 以 非常 方便 地 让 
开发 者 选择 同 种 元 素 中 想 要 的 那 一 个 或 几 个 。 


74.4 .:first-child 
:first-child 选择 器 选择 的 是 某 个 父 元 素 的 第 一 个 子 元 素 ， 比 如 下 面 的 例子 : 


<div class="main"> 
<p> 内 容 </p> 
<p> 内 容 </p> 
<p> 内 容 </p> 


</div> 


p:first-child 所 选取 的 就 是 第 一 个 p 元素。 注意 ，:first-child 会 选择 所 有 满足 是 父 元 素 第 一 个 子 
元 素 并 且 符 合 主 选择 器 要 求 的 元 素 。 
<div class="main"> 
<p> 内 容 <jp> 
<p> 内 容 </p> 
<p> 内 容 </p> 
</div> 
<div class="footer"> 
<p> 内 容 </p> 
<p> 内 容 </p> 
<p> 内 容 </p> 


</div> 
在 上 面 的 HTML 结构 中 , p:first-child 选取 的 就 是 main 元 素 中 的 第 一 个 p 子 元 素 和 footer 元 素 
中 的 第 一 个 p 子 元 素 。 通 过 下 面 的 例子 ， 再 深入 理解 一 下 这 个 选择 器 的 使 用 方法 。 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
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<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 


.Select:first-child{ 
color: red; 
b 
</style> 
</head> 
<body> 


<div class="select"> 我 是 body 元 素 的 第 一 个 类 名 为 select 的 子 元 素 ， 我 会 被 选择 </div> 
<div class="select"> 
<p class="select"> 我 也 是 第 一 个 子 元 素 ， 我 会 被 选择 </p> 
<p class="select"> 我 不 是 第 一 个 子 元 素 ， 所 以 我 不 会 被 选择 </p> 
</div> 
</body> 
</html> 


在 上 面 的 代码 中 ， 所 有 会 被 选中 的 元 素 都 具备 两 个 特征 : 
© 它 的 类 名 为 select. 
° 它 是 某 个 父 元 素 的 第 一 个 子 元 素 。 
7.4.2 :last-child 
与 :first-child 选择 器 相对 应 ，:last-child 选择 器 用 来 选取 某 个 父 元 素 的 最 后 一 个 元 素 。 
【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 


.Select:first-child{ 
color: red: 
上 
</style> 
</head> 
<body> 


<div class="select"> 我 是 第 一 个 子 元 素 ， 我 不 会 被 选择 </div> 
<div class="select"> 
<p class="select"> 我 不 是 最 后 一 个 子 元 素 ， 我 不 会 被 选择 </p> 
<p class="select"> 我 不 是 最 后 一 个 子 元 素 ， 我 不 会 被 选择 </p> 
<p class="select"> 我 是 最 后 一 个 子 元 素 ， 我 会 被 选择 </p> 
</div> 
<div class="select"> 我 是 最 后 一 个 类 名 为 select 的 子 元 素 ， 我 会 被 选择 </div> 
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</body> 
</html> 


7.4.3 :nth-child(n) 


上 节 的 两 个 选择 器 只 能 选取 属于 父 元 素 的 第 一 个 元 素 或 者 最 后 一 个 元 素 ，CSS 中 也 有 一 种 选 
择 器 可 以 选择 任意 一 个 元 素 ， 即 :nth-child(n)。 传 入 一 个 数值 ， 就 会 选取 到 对 应 位 置 的 元 素 。 注 意 ， 
这 里 传 入 的 是 几 选 择 的 就 是 第 几 个 元 素 ， 而 不 像 索引 那样 ，span:nth-child(2) 选 择 器 所 选择 的 元 素 是 
在 父 元 素 中 为 第 二 个 元 素 的 span 元 素 。 

【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 

p:nth-child(2) í 

color: red; 





J 
pinth-child(3){ 
color: green 
; 
</style> 
</head> 
<body> 
<div class="main"> 
<p> 第 一 个 元 素 </p> 
<p> 第 二 个 元 素 </p> 
<p> 第 三 个 元 素 </p> 
<p> 第 四 个 元 素 </p> 
<p> 第 五 个 元 素 </p> 
</div> 
<div class="apart"> 
<p> 第 一 个 元 素 </p> 
<p> 第 二 个 元 素 </p> 
<p> 第 三 个 元 素 </p> 
<p> 第 四 个 元 素 </p> 
<p> 第 五 个 元 素 </p> 
</div> 
</body> 
</html> 


在 上 面 的 代码 中 ， 将 每 个 作为 其 父 元 素 的 第 二 个 元 素 的 p 元 素 染 成 红色 ， 再 将 每 个 作为 其 父 
元 素 的 第 三 个 元 素 的 p 元 素 染 成 绿色 。 
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这 种 选择 器 经 常会 用 在 一 系列 相同 的 结构 中 ， 要 求 子 元 素 之 间 虽 有 不 同 却 有 规律 的 展现 形式 。 
如 果 不 使 用 这 个 选择 器 ， 就 需要 为 每 个 元 素 指定 不 同 的 类 和 样式 ， 会 增加 HTML 代码 和 CSS 代码 
的 复杂 度 。 

相对 应 的 还 有 :nth-last-child(n) 选 择 器 。:nth-last-child 选择 器 和 :nth-child 选择 器 相反 ,用 来 从 后 
往 前 选取 第 n 个 元 素 。 
7.4.4 :nth-of-type(n) 





:nth-child(n) 用 来 选择 属于 父 元 素 的 第 n 个 子 元 素 。:nth-of-type(n) 选 择 器 和 :nth-child(n) 选 择 器 
类 似 ，:nth-of-type(n) 选 择 器 选取 的 是 父 元 素 中 第 n 个 符合 主 选择 器 条 件 的 元 素 。 比 如 ， 
span:nth-of-type(2) 选 取 的 是 属于 父 元 素 第 二 个 span 元 素 的 span 元 素 。 

为 了 加 以 区 别 ， 来 看 下 面 的 例子 。 


【示例 】 


<div class="main"> 
<p></p> 
<span></span> 
<span></span> 
</div> 





在 上 面 的 HTML 结构 中 , 如 果 使 用 span:nth-child(2) 选 择 器 , 那么 选取 的 就 是 第 一 个 span 元 素 ; 
如 果 使 用 span:nth-oftype(2) 选 择 器 ， 那 么 选取 的 就 是 第 二 个 span 元 素 。 

与 此 对 应 的 还 有 :nth-last-of-type(n) 选 择 器 ,会 从 后 向 前 选取 ， 选 取 方式 和 :nth-of-type(n) 选 择 器 
一 样 。 


7.5 属性 选择 器 


CSS 中 有 一 类 选择 器 ， 可 以 根据 HTML 中 的 元 素 标签 是 否 设 定 了 某 一 个 属性 来 选择 元 素 ， 它 
们 使 用 [] 表 示 ， 涉 及 元 素 的 属性 。 
7.5.1 [attribute] 


最 基本 的 属性 选择 器 是 [attribute]， 选 择 的 是 带 有 attribute 属性 的 元 素 。 在 下 面 的 例子 中 ， 在 所 
有 的 input 标签 中 选取 带 有 placeholder 属性 的 那 一 个 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" > 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
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input[placeholder] í 
background: red; 
H 
</style> 
</head> 
<body> 


<input type="text"/> 

<input type="text" placeholder=" 带 有 placeholder 的 input 标签 "/> 
</body> 
</html> 


在 上 面 的 代码 中 ， 使 用 input[placeholder] 选 择 器 获取 带 有 placeholder 属性 的 input 元 素 ， 并 设 
置 其 背景 颜色 为 红色 。 


7.5.2 [attribute=value] 


更 常见 的 是 根据 属性 值 的 情况 选择 元 素 。[attribute=value] 选 择 器 选取 的 是 attribute 属性 为 value 
值 的 元 素 。 在 下 面 的 例子 中 ， 使 用 选择 器 为 不 同类 别 的 input 标签 指定 不 同 的 样式 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
input[type= text]{ 
background: green; 
j 
input[type= email] í 
background: white; 


] 
input[type= password]í 
background: red; 
| 
</style> 
</head> 
<body> 


<input type="text" placeholder="text 类 型 输入 框 "/> 

<input type="email" placeholder="email 类 型 输入 框 "> 

<input type="password" placeholder="password 类 型 输入 框 "/> 
</body> 
</html> 


在 上 面 的 代码 中 ， 根 据 input 标签 的 type 属性 值 为 不 同 的 input 元 素 设 定 不 同 的 背景 颜色 。 
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7.5.3 [attribute~=value] 


更 加 复杂 的 情况 是 在 CSS 中 的 [attribute~=value] 选 择 器 ， 可 以 选取 属性 值 中 包含 某 一 字段 ， 例 
如 ， 有 下 面 的 HTML 结构 : 

<div class="test"></div> 

<div class="test2"></div> 

<div class="test3"></div> 


那么 ，div[class~=test] 选 择 器 就 会 选择 这 段 HTML 结构 中 的 全 部 div 元 素 ， 因 为 它们 的 class 
属性 值 中 都 包含 “test”。 

其 实 ， 开 发 者 还 可 以 为 元 素 自己 定义 一 些 属性 ， 以 满足 开发 者 的 需求 ， 这 就 使 得 选择 器 的 功 
能 非常 强大 了 。 看 一 下 下 面 的 例子 。 

【示例 】 

<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

<style type="text/css"> 

div[divname~=animal] í 


color: red; 
J 
div[divname~=fruite] í 
color: green; 
; 


div[divname~=fish] { 
color: yellow; 

} 

</style> 

</head> 

<body> 
<div divname="animal-bird"> 鸟 </div> 
<div divname="fruite-apple"> 苹 果 </div> 
<div divname="fruite-orange">ł# F </div> 
<div divname="animal-horse"> </div> 
<div divname="fish-shark"> %& ffa </div> 

</body> 

</html> 


其 实 ， 很 多 前 端 框 架 会 利用 这 个 特性 来 实现 一 些 高 级 的 效果 。 
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76 其 他 选择 器 


CSS 中 还 有 一 些 比较 常用 的 选择 器 ， 下 面 对 * 选 择 器 〈 选 择 所 有 元 素 ) 进行 介绍 。 

* 选 择 嚣 可 以 用 来 选择 整个 HTML 文档 中 的 所 有 元 素 , 这 个 选择 器 经 常用 在 去 除 浏览 器 默认 样 
RE. 例如 , 浏览 器 经 常会 有 一 些 默 认 的 边 距 设 定 , 并 且 不 同 浏览 器 的 内 边 距 和 外 边 距 不 同 , 这 时 ， 
往往 会 在 CSS 代码 开头 添加 如 下 代码 : 

2 

margin: 0; 
padding: 0; 
| 
这 样 就 可 以 将 所 有 元 素 的 内 边 距 和 外 边 距 都 初始 化 为 0， 清除 浏览 器 的 默认 样式 。 


元 素 定 位 


本 章 内 容 要 点 : 

Æ position 属性 的 使 用 

3⁄ float 浮动 布局 

设置 CSS 样式 时 ,常用 的 属性 之 一 就 是 position, 元素 在 页 面 中 放 在 哪里 、 各 个 元 素 之 间 位 置 
关系 都 需要 使 用 position 这 个 属性 来 设置 。 

position 属性 包含 多 个 值 ， 每 个 值 都 会 有 不 同 的 定位 标准 。 本 章 介 绍 position 元 素 的 属性 及 
使 用 。 


8.1 static 





将 position 设置 为 static， 和 不 设置 position 属性 值 的 效果 是 一 样 的 ，static 其 实 就 是 默认 值 。 
下 面 我 们 来 看 一 下 不 设置 position 时 元 素 默认 的 排列 方式 是 什么 样 的 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
iad 
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margin: 0; 
padding: 0; 
; 
.a{ 
width: 600px; 
height: 200px; 
background: green; 
} 
.b{ 
width: 600px; 
height: 200px; 
background: red; 
} 
‘of 
background: yellow; 
} 
dí 
background: pink; 
} 
</style> 
</head> 
<body> 
<div class="a"></div> 
<div class="b"></div> 
<span class="c"> 测 试 1</span> 
<span class="d"> 测 试 2</span> 
</body> 
</html> 


从 上 面 代码 显示 的 效果 《〈 见 图 8-1) 可 以 看 出 ， 在 不 设 定 position 属性 时 元 素 是 如 何 排 布 的 。 
同时 可 以 发 现 不 同 的 标签 有 不 同 的 排列 方法 ， 这 跟 CSS 中 元 素 的 展示 效果 有 关 。 





图 8-1 
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CSS 中 有 两 类 元 素 ， 一 类 是 div. p. ul 等 标签 定义 的 元 素 ， 是 块 级 元 素 ; 另 一 类 是 span, input 


等 标签 定义 的 元 素 ， 是 行内 元 素 。 如 果 不 指 定 块 级 元 素 的 position 属性 ， 那 么 每 一 个 块 级 元 素 默 认 
需要 占用 一 行 的 位 置 ， 不 论 大 小 ， 在 HTML 中 位 于 其 后 的 元 素 自动 移 到 下 一 行 。 对 于 行内 元 素 而 
言 ， 元 素 会 在 一 行内 接着 排 布 ， 按 照 在 HTML 结构 中 的 顺序 排 布 。 以 上 就 是 默认 情况 下 元 素 自由 
排 布 时 的 原则 ， 和 HTML 的 结构 还 是 有 很 大 关系 的 。 


8.2 relative 


relative 表示 按照 元 素 本 身 的 位 置 进行 定位 。 当 为 元 素 指定 了 relative 定位 后 ,就 可 以 使 用 top, 


bottom. right. left 来 进行 元 素 位 置 的 设 定 了 。 


根据 元 素 本 身 的 位 置 进行 定位 的 含义 为 ， 原 本 不 设 定 position 属性 时 元 素 有 一 个 位 置 ， 设 定 


relative 后 ， 为 其 指定 的 top、bottom 等 
移动 。 下 面 的 示例 是 在 上 面 例子 的 基础 上 使 用 了 relative 进行 定位 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 





属性 值 都 是 相对 初始 位 置 定位 的 ， 可 以 理解 为 相对 初始 位 置 


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 


<style type="text/css"> 

ZA 
margin: 0; 
padding: 0; 

J: 

.af 
width: 100px; 
height: 50px; 
background: green; 
position: relative; 
left: 20px; 

} 

.bf{ 
width: 100px; 
height: 50px; 
background: red; 
position: relative; 
top: 20px; 

} 

f 
background: yellow; 
position: relative; 
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bottom: 20px 
} 
dí 
background: pink; 
position: relative; 
right: 20px; 
} 
-æf 
width: 100px; 
height: 50px; 
background: green; 
position: relative; 
top: 40px; 
} 
</style> 
</head> 
<body> 
<div class="a"></div> 
<div class="b"></div> 
<span class="c"> 测 试 1</span> 
<span class="d"> 测 试 2</span> 
<div class="e"></div> 
</body> 
</html> 


最 终 效 果 如 图 8-2 所 示 。 








图 8-2 
对 比 这 两 次 的 样式 ， 加 入 relative 后 ， 其 实 就 是 相对 于 static 的 定位 平移 一 定 的 像素 。 


8.3 absolute 


absolute 属性 值 是 position 中 比较 常用 、 比 较 复 杂 的 








属性 ， 如 果 一 个 元 素 被 设 定 为 absolute 定 


位 , 那么 它 会 相对 于 离 它 最 近 的 被 设 定 了 position 属性 的 祖先 元 素 定 位 。 注意, 不 包括 设 定 了 static 
定位 的 元 素 。 为 了 更 形象 地 了 解 absolute 定位 的 意义 ， 先 看 下 面 的 例子 。 
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【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 


<style type="text/css"> 


.Container{ 
background: rgba(0, 0, 0, .6); 
width: 300px; 
height: 500px; 
position: relative; 

} 

.soní 
width: 50px; 
height: 50px; 
background: red; 
position: absolute; 
top: 100px; 
left: 100px; 

} 

</style> 
</head> 
<body> 

<div class="container"> 
<div class="son"></div> 

</div> 

</body> 
</html> 


上 面 的 代码 效果 如 图 8-3 所 示 。 

在 上 面 的 例子 中 ，container 元 素 设 定 了 relative 定位 。 它 离 son 元 
素 最 近 ， 是 符合 absolute 依据 条 件 的 元 素 ， 因 此 设置 了 absolute 定位 的 
son 元 素 依据 container 元 素 进 行 定位 。 接 下 来 为 son 元 素 设 定 left 和 top 
的 值 均 为 100px， 表 示 距 离 container 元 素 的 左 侧 和 上 侧 距 离 分 别 为 
100px。 这 就 是 绝对 定位 达到 的 效果 。 

如 果 某 个 元 素 设 定 了 绝对 定位 ， 并 且 向 上 层 搜 索 并 没有 发 现 设 定 
position 定位 的 元 素 , 那么 这 个 元 素 就 是 以 body 标签 为 参照 进行 定位 的 。 








图 8-3 
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有 了 绝对 定位 ， 开 发 者 就 可 以 很 轻松 地 处 理 复杂 的 定位 效果 了 ， 只 要 注意 父子 元 素 之 间 的 关 
系 ， 就 可 以 很 轻松 地 将 元 素 放 到 页 面 上 应 有 的 位 置 。 


8.4 fixed 


fixed 定位 在 PC 端 使 用 更 为 频繁 。fixed 和 absolute 定位 类 似 ， 但 是 定位 依据 只 有 一 个 : 依照 
窗口 进行 定位 。 我 们 经 常会 在 网 站 中 看 到 一 个 元 素 固定 在 页 面 中 的 某 一 个 位 置 , 不 管 我 们 如 何 滚动 
页 面 ， 那 个 元 素 位 置 都 保持 不 变 ， 这 种 效果 就 是 使 用 fixed 完成 的 。 下 面 的 例子 将 展现 使 用 fixed 
定位 的 效果 。 

【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
"1 
margin: 0; 
padding: 0; 
} 
-af 
width: 100%; 
height: 500px; 
background: rgba(0, 0, 0, .6); 
; 
.b{ 
width: 100%; 
height: 500px; 
background: rgba(123, 222, 201, .6); 
J. 
.fixed{ 
width: 50px; 
height: 50px; 
background: red; 
position: fixed; 
top: 100px; 
left: 100px; 
} 
</style> 
</head> 
<body> 
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<div class="fixed"></div> 
<div class="a"></div> 
<div class="b"></div> 
</body> 
</html> 


效果 如 图 8-4 所 示 。 

为 了 让 效果 演示 得 更 清晰 ， 使 用 两 种 不 同 的 颜色 为 背景 。 当 滑动 滚动 
条 时 ， 虽 然 背景 的 位 置 在 不 断 变化 ， 但 是 设置 了 fixed 定位 的 元 素 位 置 始终 
保持 不 变 ， 因 为 它 是 相对 于 屏幕 进行 定位 的 ， 与 界面 其 他 元 素 的 位 置 无 关 。 


8.5 float 浮动 布局 


CSS 中 有 一 种 浮动 布局 方式 ， 可 以 通过 设 定 一 个 元 素 的 float 属性 实现 。float 布局 最 开始 用 来 
形成 文字 环绕 的 定位 效果 。 
代码 : 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 


img{ 
width: 200px; 
height: 80px; 
float: right; 
} 
</style> 
</head> 
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<body> 
<div class="container"> 
<p> 


<img src="a.jpg"> 


是 一 个 经 常会 被 用 到 的 position 属性 值 。 如 果 为 某 个 元 素 设 定 了 absolute， 则 该 元 素 脱离 原 
来 的 文档 流 。 形 象 一 些 说 ， 比 如 a 元 素 被 定义 了 position:absolute， 那 么 这 个 元 素 就 不 会 与 这 个 页 
面 中 的 其 他 元 素 发 生 位 置 上 的 关系 , 而 是 凌驾 于 整个 页 面 之 上 的 漂浮 状态 。 页 面 中 的 其 他 元 素 的 位 
置 变化 、 大 小 变化 等 ， 都 不 会 影响 a 元 素 的 位 置 ， 相 当 于 一 个 局 外 人 。 下 述 代码 形成 的 文字 环绕 效 
果 如 图 8-5 所 示 。 

</p> 

</div> 
</body> 
</html> 





图 8-5 


上 面 的 例子 是 float 定位 被 设计 出 来 的 初衷 。 在 CSS 中 ， 其 实 所 有 的 元 素 都 可 以 设置 float, JA 
而 出 现 一 些 float 属性 使 用 ` P: 





浮动 布局 有 一 个 特点 HT float 属性 的 元 素 会 脱离 整个 页 面 ， 感 官 上 的 效果 就 是 父 元 素 
不 会 “感受 ” s 5. 

比如 ， 需 要 在 父 元 素 中 定义 一 个 元 素 ， 让 这 个 元 素 位 于 右 侧 ， 一 个 很 好 的 解决 办 法 就 是 使 用 
float:right 让 元 素 向 右 浮动 。 参 看 下 面 的 例子 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" > 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
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width: 100%; 
height: auto; 
padding-bottom: 20px; 
background: rgba(0, 0, 0, .6); 
) 
.wrapí 
width: 30px; 
height: 100px; 
background: rgba(111, 223, 14, .6); 
float: right; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="wrap"></div> 
</div> 
</body> 
</html> 


效果 如 图 8-6 所 示 。 


图 8-6 

从 上 面 的 例子 中 发 现 ， 父 元 素 除 了 20 像素 的 padding-bottom 之 外 ， 根 本 没有 将 子 元 素 包含 进 
来 。 这 就 是 刚才 说 的 设置 了 浮动 的 子 元 素 是 不 会 被 父 元 素 “ 感 受 ”到 的 , 因为 它 已 经 脱离 了 文本 流 。 
这 种 情况 不 解决 ， 会 对 开发 者 的 样式 书写 造成 很 大 的 影响 。 

解决 这 种 问题 的 方法 很 多 ， 下 面 介绍 一 种 简单 的 。 

【示例 】 

<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

<style type="text/css"> 
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"t 
margin: 0; 
padding: 0; 

} 

.Container{ 
width: 100%; 
height: auto; 
padding-bottom: 20px; 
background: rgba(0, 0, 0, .6); 
overflow: auto; 


1 
.wrap{ 
width: 30px; 
height: 100px; 
background: rgba(111, 223, 14, .6); 
float: right; 
; 
</style> 
</head> 
<body> 


<div class="container"> 
<div class="wrap"></div> 
</div> 
</body> 
</html> 


效果 如 图 8-7 所 示 。 








图 8-7 
这 里 只 为 父 元 素 添加 了 overflow: hidden 便 解 决 了 上 面 的 问题 ， 这 类 方法 被 称 为 “清除 浮动 ”。 
建议 尽量 少 使 用 float 定位 ， 如 果 使 用 了 float 定位 ， 就 一 定 要 清除 浮动 ， 以 减少 浮动 对 页 面 布 
局 的 影响 。 


移动 元 素 单 位 


本 章 内 容 要 点 : 


* 图 像 采 样 单位 px 
* 图 像 采 样 单位 em 


本 章 介绍 的 移动 元 素 单位 是 使 用 Web 技术 开发 移动 端 应 用 极其 重要 的 技术 。 使 用 Web 技术 开 
发 移动 端 应 用 最 核心 的 问题 就 是 适 配 。 移 动 设备 屏幕 大 小 千差万别 ， 而 Web 开发 最 初 只 是 用 在 大 
屏幕 的 PC 上 。 如 何 将 Web 开发 巧妙 地 从 大 屏 电脑 转换 到 小 巧 的 移动 设备 非常 重要 。 解 决 办 法 是 
使 用 移动 端 元 素 单位 。 本 章 介绍 了 多 种 不 同 于 传统 Web 开发 中 常用 单位 的 移动 端 单位 ， 灵 活 地 使 
用 这 些 单位 可 以 让 Web 开发 的 应 用 适用 于 任何 尺寸 的 设备 。 


9.1 px 


px 表示 像素 ， 是 图 像 的 基本 采样 单位 ， 不 是 一 个 固定 的 物理 量 。 在 CSS 中 ，px 是 一 个 相对 长 
度 ， 是 相对 于 电脑 显示 器 的 分 辩 率 。 也 就 是 说 ， 当 给 一 个 元 素 设 定 了 一 个 固定 的 px 时 ， 它 在 不 同 
分 辨 率 显示 器 上 的 实际 物理 大 小 是 不 同 的 ， 但 是 px 在 分 辩 率 确定 的 显示 器 上 有 固定 的 物理 大 小 。 

这 里 对 屏幕 分 辨 率 进行 一 下 介绍 ， 以 便 大 家 更 好 地 了 解 pk。 当 屏 幕 分 辩 率 低 时 ， 屏 幕 上 显示 的 
像素 少 ， 但 斥 寸 比较 大 。 当 屏幕 分 辩 率 高 时 ， 屏 幕 上 显示 的 像素 多 ， 但 尺寸 比较 小 。 比 如 说 ， 屏 幕 
分 辨 率 为 640x 480 时 , 屏幕 上 的 水 平方 向 显示 像素 个 数 为 640 个 、 垂直 方向 显示 像素 个 数 为 480 个 。 
想 形象 地 体会 这 个 变化 ， 可 以 在 Windows 电脑 中 手动 设 定 一 下 桌面 的 属性 。 

屏幕 的 物理 大 小 、 屏 幕 分 辩 率 、px 之 间 的 罗 辑 关系 可 以 这 样 理解 : 一 般 的 电脑 屏幕 物理 大 小 
是 固定 的 , 屏幕 的 分 辩 率 是 可 以 修改 的 , 分 辩 率 的 改变 使 得 一 定 px 的 物体 实际 物理 大 小 发 生变 化 。 
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CSS 规定 ， 当 浏览 器 在 解析 px 时 ， 为 了 保证 样式 在 各 类 型 屏幕 所 看 到 的 物理 大 小 相似 会 进行 
一 个 换算 ， 这 个 换算 主要 是 根据 当前 屏幕 的 分 辩 率 进行 的 。 最 后 的 结果 是 ， 在 不 同 的 屏幕 看 固定 
px 大 小 的 网 页 元 素 时 ， 给 人 们 的 感觉 是 它们 的 实际 物理 大 小 是 相似 的 。 

px 是 Web 开发 中 使 用 非常 广泛 的 CSS 单位 。 在 PC 端 ， 基 本 都 是 通过 px 进行 大 小 设 定 的 。 
显然 ， 这 在 移动 端 会 出 现 问题 。 移 动 端 屏幕 较 小 ， 而 且 不 同 移动 设备 的 尺寸 千差万别 。 刚 才 说 过 ， 
px 经 过 浏览 器 解析 后 显示 的 物理 大 小 在 不 同 设备 上 相似 , 因此 如 果 使 用 px 作为 单位 并 且 不 进行 兼 
容 化 ， 那 么 样式 方面 很 容易 出 现 问题 。 

为 了 让 页 面 在 不 同 的 移动 端 设备 中 适 配 ， 可 以 通过 一 些 CSS 技巧 或 JavaScript 脚本 文件 修改 
样式 .其 中 的 原则 是 能 使 用 CSS 技巧 的 就 一 定 要 使 用 CSS, 尽量 避免 使 用 JavaScript 调整 界面 样式 ， 
平时 一 定 要 多 积累 CSS 技巧 。 下 面 举 几 个 移动 端 样式 解决 方案 的 例子 ， 供 读者 参考 。 


9.1.1 需求 描述 一 
移动 端 设 备 ， 要 求 画 出 一 个 div， 宽 度 为 屏幕 宽度 ， 高 度 为 宽度 的 四 分 之 一 。 


(1) JavaScript 方法 解析 : 该 需求 可 以 使 用 JavaScript 进行 解决 ， 方 法 比较 简单 ， 因 为 宽度 要 
求 是 屏幕 宽度 ， 高 度 为 宽度 的 四 分 之 一 ， 我 们 只 需要 通过 JavaScript 获取 设备 宽度 ， 并 且 计算 出 高 
度 ， 再 使 用 JavaScript 设置 其 CSS 样式 即 可 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
S 
padding: 0; 
margin: 0; 
; 
-containerí 
width: 100%; 
background-color: rgba(0, 0, 0. .6); 
Í; 
</style> 
</head> 
<body> 
<div class="container" id="container"></div> 
<script> 
window.onload = function(){ 
var container = document.getElementByld("container"); 
var conW = document.body.clientWidth; 
var conH = conW / 4; 
container.style.width = conW; 
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container.style.height = conH; 
} 
</script> 
</body> 
</html> 


首先 通过 document. body.clientWidth 获取 设备 的 宽度 ， 再 通过 element.style.width 进行 元 素 的 
宽度 设置 ， 即 可 完成 需求 。 

使 用 JavaScript 进行 样式 的 修改 本 身 就 是 不 规范 的 ， 加 强 了 样式 和 JavaScript 逻辑 代码 的 耦合 
性 ， 原 则 上 能 不 使 用 JavaScript 代码 就 不 使 用 。 下 面 来 看 一 下 如 何 用 CSS 来 解决 这 个 需求 。 

(2) CSS 方法 解析 : 在 CSS P, 不 能 用 JavaScript 的 那 种 思维 进行 思考 , 而 需要 使 用 一 些 css 

中 的 技巧 。 学 过 CSS 的 都 知道 ，padding 属性 是 用 来 设 定 元 素 内 边 距 的 ， 但 是 padding 的 作用 不 仅 
限于 此 。 当 设置 一 个 元 素 的 padding 为 百分比 时 ， 该 元 素 会 基于 父 元 素 的 宽度 百分比 设置 内 边 距 。 
下 面 就 利用 padding 的 这 个 特性 来 实现 之 前 的 需求 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
St 
padding: 0; 
margin: 0; 
| 
.Container{ 
width: 100%; 
$ 
„outer{ 
width: 100%; 
padding-top: 25%; 
position: relative; 
background: rgba(0, 0, 0, .6); 








.wrapí 
position: absolute; 


top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
$ 
</style> 
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<body> 
<div class="container"> 
<div class="outer"> 
<div class="wrap"> 
</div> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


上 面 的 代码 仅仅 使 用 CSS 就 解决 了 问题 。 首先 为 container 设 定 宽度 为 100%, 然后 在 container 
里 面 添加 一 个 名 为 outer 的 div， 这 个 div 为 其 设 定 padding-top 为 23%， 这 样 在 没有 设 定 元 素 高 度 
的 情况 下 ，outer 元 素 的 大 小 就 是 padding-top， 也 就 是 宽度 的 四 分 之 一 。 接 下 来 ,在 outer 中 用 一 个 
元 素 将 外 面 的 outer 撑 起 来 ， 形 成 一 个 正常 的 区 域 ， 只 要 设置 上 下 左右 的 定位 都 为 0 即 可 完成 需求 
区 域 的 设 定 。 


9.1.2 需求 描述 二 

在 上 面 的 需求 基础 上 再 在 左 侧 加 一 个 图 片 ， 图 片 部 分 的 宽 高 根据 屏幕 的 大 小 自 适 应 ， 注 意图 
片 的 宽 高 比 要 控制 为 23〈 图 片 素材 的 宽 高 比 不 一 定 为 23) 。 

解析 : 这 里 又 添加 了 图 片 ， 主 要 也 是 解决 宽 高 比 ， 并 且 要 求 图 片 能 随 着 屏幕 的 宽 高 发 生变 化 。 
该 需求 也 可 以 使 用 JavaScript 和 CSS 两 种 方法 实现 。JavaScript 的 思路 与 上 面 的 相同 ， 就 是 通过 
JavaScript 进行 硬 设置 。 如 果 使 用 CSS， 就 需要 开发 者 使 用 一 点 数学 方面 的 技巧 了 。 


(1) JavaScript 方法 解析 : 因为 图 片 需要 适 配 ， 所 以 可 以 根据 需求 设置 一 个 内 边 距 值 。 在 通 
过 JavaScript 设置 图 片 宽 高 时 ， 只 要 将 高 度 设置 成 (外 层 高 度 一 内 边 距 值 /2〉 即 可 ， 这 样 就 可 以 固 
定 图 片 的 上 下 边 距 、 调 节 图 片 大 小 了 。 

【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
sod 
padding: 0; 
margin: 0; 
] 
.Container{ 
width: 100%; 
background: rgba(0, 0, 0. .6); 
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.img{ 
padding: 10px; 
} 
img{ 
width: 100%; 
height: 100%; 
} 
</style> 
</head> 
<body> 
<div class="container" id="container"> 
<div class="img" id="img"> 
<img sre="a.jpg"> 
</div> 
</div> 
<script> 
window.onload = function()í 


var container = document.getElementByld("container"); 


var img = document.getElementByld("img"); 
var conW = document.body.client Width; 
var conH = conW / 4; 
var imgH = conH - 20; 
var imgW =imgH * 3 /2 
container.style.width = conW; 
container.style.height = conH; 
img.style.width = img W: 
img.style.height = imgH; 
j; 

</script> 

</body> 

</html> 


从 上 面 的 代码 可 以 发 现 ， 虽 然 使 用 JavaScript 解决 了 问题 ， 但 是 JavaScript 代码 越 来 越 多 ， 并 


且 很 多 都 是 没有 逻辑 的 ， 只 是 为 了 设置 样式 而 已 。 另外， 使 用 JavaScript 会 出 现 一 些 问题 ， 比 如 上 
面 的 代码 中 只 设置 一 次 元 素 大 小 ， 就 是 在 页 面 加 载 完成 后 。 如 果 用 户 翻 转手 机 , 或 者 分 屏 后 ， 页 面 
发 生 大 小 变化 时 ,页面 不 会 刷新 ， 因 此 元 素 的 大 小 不 会 发 生变 化 ,就 会 出 现 bug. 我 们 在 用 Chrome 
浏览 器 进行 调试 的 时 候 就 会 发 现 这 一 点 ， 当 切换 调试 设备 时 ， 如 果 不 手 动 刷新 页 面 ， 元 素 的 大 小 是 
不 会 发 生变 化 的 ， 而 会 出 现 页 面 样式 变 乱 的 情况 。 


(2) CSS 方法 解析 : 外 层 容 器 的 宽 高 比 是 4:1， 内 层 图 片 的 宽 高 比 是 3:2。 现 在 假定 图 片 的 高 


ow/oh=4/1; 


度 和 屏幕 的 高 度 相 等 〈 因 为 除去 内 边 距 ， 二 者 的 高 度 确实 是 相等 的 ) ， 通 过 上 面 的 分 析 可 以 得 到 一 
个 数学 关系 (外 层 容 器 的 宽 高 分 别 为 ow、oh， 图 片 宽 高 分 别 为 jw、ih》: 
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iw/ih=3/2; 
ih = oh. 


因为 页 面 的 宽度 是 确定 的 〈100%) ， 所 以 可 以 得 出 iw = 3/8ow。 这 样 ， 只 要 开发 者 设 定 图 片 
的 宽度 为 37.5%、 高 度 为 100%， 就 可 以 实现 图 片 大 小 适 配 ， 并 且 固定 宽 高 比 了 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
et 


padding: 0; 
margin: 0; 

I 

„container { 
width: 100%; 

} 

.Outer{ 
width: 100%; 
padding-top: 25%; 
position: relative; 
background: rgba(0, 0, 0, .6); 

1 

.wrapí 
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 

J 

.img{ 
padding: 10px; 
height: 100%; 
width: 37.5%; 
box-sizing: border-box; 

] 

imgí 
width: 100%; 
height: 100%; 

j 

</style> 


</head> 


第 9 章 移动 元 素 单位 | 143 





<body> 
<div class="container"> 
<div class="outer"> 
<div class="wrap"> 
<div class="img"> 
<img src="a.jpg"> 
</div> 
</div> 
</div> 
</div> 

<script> 

</script> 

</body> 

</html> 

在 上 面 的 代码 中 使 用 了 CSS 中 的 box-sizing 属性 ， 这 个 属性 可 以 修改 计算 与 模型 宽 高 的 模式 ， 
默认 计算 方法 包括 元 素 实际 宽 高 、 内 边 距 、 外 边 距 、 边 框 等 。 这 里 设 定 为 border-box， 则 元 素 的 宽 
度 不 包括 内 边 距 和 外 边 距 。 通 过 这 种 方式 ， 可 以 设置 内 部 的 img 宽 高 为 100%， 填 满 外 层 容 器 ， 而 
且 会 留 下 设 定 内 边 距 的 空间 。 

所 以 ， 想 熟练 使 用 px 来 解决 适 配 ， 最 好 使 用 CSS 方法 。 使 用 CSS 方法 就 需要 开发 者 在 CSS 
领域 中 多 积累 、 多 学 习 ， 以 驾驭 没有 定式 的 CSS 技巧 。 


9.2 em 


与 px 相 比 ，em 是 一 个 相对 单位 。 这 里 的 相对 ， 指 的 是 相对 于 父 元 素 字体 的 大 小 。 最 开始 的 
情况 下 ， 如 果 其 他 元 素 都 没有 设 定 font-size 属性 值 ， 就 按照 浏览 器 默认 的 body 元 素 的 font-size (Ë 
进行 计算 。 浏 览 器 默认 的 font-size 为 16px， 如 果 给 一 个 元 素 设置 为 2em， 那 么 该 元 素 实际 的 像素 
值 就 是 32px， 也 就 是 说 元 素 实 际 像素 值 等 于 父 元 素 font-size 乘 以 元 素 em 值 。 

通过 在 Chrome 浏览 器 中 调试 下 面 的 例子 来 看 一 下 em 的 工作 原理 。 

【示例 】 

<!DOCTYPE> 

<html> 

<head> 


<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 





<style type="text/css"> 
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font-size: 10px; 
} 
.Container{ 
width: 100%; 
height: 100%; 
background: rgba(0, 0, 0, .6); 
font-size: 24px; 
} 
.wrap{ 
height: 10em; 
width: 10em; 
background: rgba(222, 222, 222, .6); 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="wrap"></div> 
</div> 
</body> 
</html> 


在 Chrome 浏览 器 中 打开 网 页 ,主要 观察 wrap 这 个 div 的 变化 ,首先 调整 container 的 font-size, 
我 们 会 发 现 ，container 的 font-size 调整 后 ，wrap 元 素 大 小 也 发 生 了 变化 。 这 其 实 就 是 浏览 器 根据 
font-size 的 值 和 确定 的 em 值 计算 实际 px 值 的 过 程 , 三 者 之 间 满 足 上 面 所 说 的 关系 。 接 下 来 , 注释 
掉 在 container 中 设 定 的 font-size 的 值 ， 转 而 修改 body 中 设 定 的 font-size 值 。 我 们 会 发 现 ，wrap 
元 素 的 大 小 又 随 着 body 中 的 font-size 值 变 化 了 , 然而 在 container 中 设 定 font-size 值 后 ,外 层 body 
中 的 font-size 属性 值 无 论 如 何 调整 都 不 会 影响 到 wrap 元 素 的 大 小 。 这 表明 ， 某 个 元 素 的 em 值 是 
相对 于 外 围 元 素 中 离 它 最 近 的 那个 设置 了 font-size 值 的 元 素 进 行 计算 的 。 


9.3 rem 


rem 是 一 种 比较 新 的 单位 ， 和 em 一 样 是 一 个 相对 单位 ， 相 对 的 是 根 元 素 字体 大 小 。 使 用 rem 
为 单位 ， 可 以 很 轻松 地 做 好 适 配 。 移 动 端 设备 的 手机 大 小 不 同 ， 这 个 时 候 的 思路 是 使 用 rem。 当 屏 
幕 大 小 变化 时 ， 根 据 屏幕 大 小 改变 根 元 素 字体 大 小 ， 即 可 实现 不 同 屏幕 下 的 元 素 大 小 自 适 应 更 改 。 
这 里 的 根 元 素 指 的 就 是 HTML 标签 中 设 定 的 font-size 

rem 和 px 的 换算 关系 很 简单 ,比如 设 定 了 HTML 的 font-size 为 20px， 其 中 的 一 个 元 素 宽 度 设 
置 成 了 2rem， 那 么 这 个 元 素 的 实际 大 小 换算 成 px 就 是 20pxX2=40px。 开 发 者 需要 做 的 一 件 很 重 
要 的 事 就 是 根据 屏幕 大 小 动态 改变 HTML 根 元 素 中 的 font-size 属性 值 。 

目前 ， 淘 宝 的 手机 网 页 就 使 用 rem 的 方法 进行 移动 端 适 配 。 可 以 到 网 站 上 尝试 一 下 rem AI 
何 编 写 HTML5 页 面 的 : https://m.taobao.com。 
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接 下 来 ， 沿 用 最 开始 的 需求 ， 使 用 rem 的 方案 进行 解决 。 
9.3.1 需求 描述 一 


移动 端 设备 ， 要 求 画 出 一 个 div， 宽 度 为 屏幕 宽度 ， 高 度 为 宽度 的 四 分 之 一 。 

解析 : 通过 rem 的 原理 来 实现 这 个 需求 。 首 先 需要 找到 一 个 比较 合适 的 根 元 素 font-size 值 和 
屏幕 宽度 之 间 的 比例 ， 这 里 选择 10。 也 就 是 说 ， 屏 幕 宽度 如 果 是 375px， 那 么 根 元 素 font-size 值 就 
是 37.5px。 从 下 面 的 数学 关系 推导 中 就 可 以 看 出 rem 到 底 是 如 何 工作 的 了 。 

假设 屏幕 的 宽度 为 w， 容 器 的 宽度 为 ecw， 容器 的 高 度 为 ch， 根 元 素 的 font-size 值 为 rf， 那么 : 


w = cw; 
ch = 1⁄4cw; 
rf= 1/10w. 


从 上 面 的 公式 可 以 推导 出 : ch = 1/4rf. rem 的 值 就 是 这 个 ch A rf BJ] Z 3, KE 2.5 就 是 
最 终 要 设 定 的 容器 高 度 的 rem 值 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 


.Container{ 
width: 100%; 
height: 2.5rem; 
background: rgba(0, 0, 0, .6); 
font-size: Irem; 
text-align: center; 
line-height: 2.Srem; 
} 
</style> 
</head> 
<body> 
<div class="container">rem 测试 </div> 
<script> 
window.onload = function()í 
var w = document.body.client Width / 10; 
var root = document.getElementsByTagName("html")[0]; 
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Toot.style.fontSize = w; 
} 
</script> 
</body> 
</html> 


在 JavaScript 代码 中 ， 根 据 屏幕 的 宽度 设 定 根 元 素 的 font-size 值 ， 从 而 实现 动态 改变 。 
9.3.2 ”需求 描述 二 


在 上 面 的 需求 基础 上 再 在 左 侧 加 一 个 图 片 ， 图 片 部 分 的 宽 高 根据 屏幕 的 大 小 自 适应 ， 注 意图 
片 的 宽 高 比 要 控制 为 23《〈 图 片 素材 的 宽 高 比 不 一 定 为 23) 。 
解析 : 利用 类 似 的 方法 可 以 很 方便 地 使 用 rem 单位 完成 需求 ， 我 们 需要 做 的 只 是 计算 出 一 个 


合适 的 rem 值 。 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
d 
padding: 0; 
margin: 0; 
} 
.Container{ 
width: 100%; 
height: 2.5rem; 
background: rgba(0, 0, 0, .6); 
; 
.img{ 
width: 3rem; 
height: 2rem; 
padding: 0.25rem; 
} 
img{ 
width: 100%; 
height: 100%; 
b 
</style> 
</head> 
<body> 
<div class="container"> 


<div class="img"> 
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<img src="a.jpg" > 
</div> 
</div> 
<script> 
window.onload = function() í 
var w = document.body.clientWidth / 10; 
var root = document. getElementsByTagName("htm1")[0]; 
root.style.fontSize = w; 
$ 
</script> 
</body> 
</html> 


整个 容器 的 高 度 为 2.Srem, 所 以 可 以 设 定 图 片 高 度 为 2rem, padding 为 0.25rem、 宽 高 比 为 3:2， 
从 而 将 宽度 设 定 为 3rem， 这 样 就 完成 了 我 们 的 需求 。 和 最 开始 使 用 px 相 比 ， 这 种 方法 不 但 不 需要 
各 种 技巧 ， 而 且 代 码 更 加 整洁 、HTML 结构 更 加 清晰 ， 比 较 而 言 是 很 好 的 解决 方式 。 

该 方法 的 优点 很 明显 ， 只 需要 设 定 一 个 值 就 可 以 动态 影响 整个 页 面 的 所 有 值 。 因 此 关注 点 就 
是 如 何 设 定好 这 个 值 和 屏幕 的 关系 ,以 及 计算 这 个 值 和 页 面 内 其 他 元 素 之 间 的 关系 。 虽 然 计算 的 步 
又 相对 麻烦 ， 但 是 有 规律 可 循 ， 不 需要 将 大 量 精 力 浪费 在 思考 CSS 技巧 上 。 


本 章 内 容 要 点 : 
来 盒 模 型 及 其 属性 
米 盒 模型 展现 元 素 的 方法 
Web 页 面 中 的 每 一 个 元 素 都 是 一 个 盒 模型 ，CSS 中 使 用 盒 模型 来 描述 一 个 元 素 。 盒 模型 包含 
4 个 边界 ， 分 别 是 外 边 距 边 界 、 边 框 边界 、 内 边 距 边界 、 内 容 边 界 ， 如 图 10-1 所 示 。 
Margin Edge 


Border Edge 
Padding Edge 


> 
z 
š 
s 


content width 





图 10-1 
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通过 设 定 一 个 盒 模型 的 各 个 属性 ， 可 以 将 元 素 以 不 同 的 形式 展现 出 来 。 本 章 将 从 4 个 边界 入 
手 ， 介 绍 如 何 通过 盒 模型 展现 元 素 。 





10.1 内 X 


内 容 是 盒 模型 的 核心 ， 也 是 展现 主要 内 容 的 地 方 。 其 中 ， 最 常用 的 属性 就 是 width 和 height. 
width 和 height 用 来 定义 内 容 区 域 的 宽 和 高 ， 二 者 的 使 用 方法 相同 。 它 们 的 值 可 以 是 一 个 具体 的 数 
值 ， 也 可 以 是 一 个 百分数 。 

当 width/height 的 值 为 一 个 具体 的 数值 时 ， 可 以 为 其 指定 单位 ， 如 px. em. rem 等 ， 从 而 设 定 
出 盒 模型 中 内 容 区 域 的 大 小 。 

当 width/height 的 值 是 一 个 百分比 数值 时 ， 它 的 值 就 是 基于 父 元 素 宽 高 的 百分比 计算 出 的 值 。 比 
如 已 经 设 定 了 父 元 素 的 宽度 为 200px， 那 么 设 定子 元 素 宽度 为 20% 后 ， 其 实际 宽度 为 40px。 

与 此 类 似 ， 有 一 种 叫 min-width 的 属性 在 移动 设备 中 很 常用 。 因 为 移动 设备 经 常会 出 现 手 机 屏 
幕 小 于 开发 者 预期 ， 或 者 移动 设备 宽度 读 取出 现 未 知 错误 的 情况 ， 这 时 就 需要 开发 者 设置 一 个 
min-width。 它 指定 了 一 个 元 素 的 最 小 宽度 。 通 过 设置 该 属性 值 ， 开 发 者 可 以 给 元 素 规定 一 个 最 小 
值 ， 从 而 达到 安全 ， 或 者 满足 一 些 需求 的 作用 。 在 移动 端 开发 的 过 程 中 ,正确 的 做 法 是 ， 对 每 一 个 
元 素 都 要 根据 市 面 上 常见 的 最 小 宽度 屏幕 换算 出 一 个 元 素 的 最 小 宽度 , 并 通过 min-width 进行 设 定 。 

除 此 之 外 ， 还 有 许多 常用 的 和 内 容 相关 的 属性 ， 下 面 列 举 一 些 实用 属性 。 

10.1.1 text-align 


text-align 用 来 设 定 在 这 个 元 素 中 的 文本 水 平 对 齐 的 方式 。 它 的 属性 值 包括 left. right. center, 
justify， 分 别 对 应 左 对 齐 、 右 对 齐 、 居 中 和 两 端 对 齐 。 举 例 来 说 ， 如 果 设 置 了 左 对 齐 ， 文 字 就 会 在 
处 在 盒 模型 紧 靠 内 容 区 域 左 侧 的 位 置 。 


Q! 父 元 素 中 的 text-align 只 对 其 内 部 的 文本 生效 ， 对 于 div 等 不 生效 。 如 果 其 子 元 素 没有 设 
TE 定 text-align， 那 么 子 元 素 的 text-align 会 自动 继承 父 元 素 的 text-align, 请 看 下 面 的 例子 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" > 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 


„container { 
width: 100%; 
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height: 200px; 
background: rgba(0 ,0, 0, .6); 
text-align: center; 
} 
.Son{ 
width: 100px; 
height: 60px; 
background: rgba(13,123,13,.6); 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="son"> 内 容 </div> 
</div> 
<script> 
</script> 
</body> 
</html> 


效果 如 图 10-2 所 示 。 





图 10-2 


上 面 的 例子 为 父 元 素 设 定 了 text-align:center, 但 是 发 现 子 元 素 中 的 文本 内 容 也 水 平 居 中 了 。 同 
时 也 要 注意 子 元 素 div 并 没有 因为 父 元 素 设 定 了 text-align:center 而 居中 。 


10.1.2 line-height 

line-height 属性 用 来 设 定 行 高 ，“ 行 高 ”是 指 一 行文 字 的 高 度 ， 具 体 来 说 是 指 两 行文 字 间 基线 
之 间 的 距离 。 基 线 是 在 英文 字母 中 用 到 的 一 个 概念 , 我 们 刚 学 英语 的 时 使 用 的 那个 英语 本 子 每 行 有 
4 条 线 ， 其 中 底部 第 二 条 线 就 是 基线 。 
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当 一 个 元 素 没有 设 定 height 时 , 支撑 起 元 素 高 度 的 就 是 line-height。 比 如 , 开发 者 在 没有 为 div 
设 定 高 度 和 内 容 时 ， 其 高 度 为 0。 当 开发 者 在 其 中 输入 一 些 文本 时 ， 其 高 度 就 产生 了 ， 这 就 是 
line-height 的 作用 。 

关于 line-height， 最 常用 的 就 是 文本 的 垂直 居中 ， 请 看 下 面 的 例子 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" > 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 





<style type="text/css"> 
zi 
padding: 0; 
margin: 0; 
} 
.Container{ 
width: 100%; 
height: 200px; 
background: rgba(0 ,0, 0, .6); 
text-align: center; 
} 
.Son{ 
width: 100px; 
height: 60px; 
background: rgba(13,123,13,.6); 
line-height: 60px; 
; 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="son"> 内 容 </div> 
</div> 
<script> 
</script> 
</body> 
</html> 


效果 如 图 10-3 所 示 。 
在 上 面 的 例子 基础 上 ， 为 包含 文字 的 元 素 添加 line-height 属性 值 ， 令 其 等 于 该 元 素 的 height 
值 ， 实 现 文字 的 垂直 居中 。 
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图 10-3 
10.1.3 字体 
字体 有 一 系列 的 属性 ， 用 来 使 内 容 区 域 的 字体 样式 更 加 丰富 。 
1. font-size 


font-size 用 于 设 定 字体 大 小 ， 单 位 为 px。 浏 览 器 对 字体 的 大 小 也 有 一 些 限制 ， 比 如 谷歌 浏览 
器 不 支持 型 号 小 于 12px 以 下 的 字体 。font-size 除了 可 以 设置 字体 大 小 外 ， 有 时 还 是 页 面部 分 元 素 
尺寸 的 参考 值 。 

2. font-family 

font-family 用 来 设置 文字 的 样式 、 属 于 什么 字体 。 

3. color 

color 属性 用 来 定义 文字 的 颜色 。 

4. font-weight 

font-weight 属性 用 来 定义 文字 的 粗细 ， 既 可 以 指定 一 个 数值 ， 也 可 以 使 用 bold 等 字符 串 进行 
设 定 。 

5. font-style 

font-style 属性 用 来 定义 字体 的 风格 ， 目 前 支持 normal、italic、oblique， 分 别 表示 正常 字体 样 
式 、 斜 体 字体 样式 、 倾 斜 字体 样式 。 

6. font-variant 

font-variant 属性 用 于 英文 字母 ， 将 英文 的 小 写字 母 转换 成 大 写字 母 ， 但 是 这 些 转 换 后 的 大 写 
字母 会 变 小 。 

可 以 使 用 font 属性 ， 后 面 指定 一 系列 的 值 ， 定 义 文字 的 样式 。font 属性 相当 于 一 个 组 合 属性 。 





10.1.4 截断 


移动 端 设备 由 于 屏幕 大 小 问题 ， 经 常会 出 现 文字 内 容 超出 区 域 范围 或 不 能 完全 显示 ， 而 且 开 
发 者 也 不 希望 分 多 行 显示 的 情况 ， 这 时 开发 者 需要 使 用 截断 进行 处 理 。 截 断 处 理 的 文字 , 超出 区 域 
的 部 分 会 自动 隐藏 并 使 用 … 来 代替 。 下 面 是 使 用 截断 的 例子 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 





<style type="text/css"> 
"1 
padding: 0; 
margin: 0; 
} 
.Container{ 
width: 100%; 
height: 200px; 
background: rgba(0 ,0, 0, .6); 
} 
.Son{ 
width: 300px; 
background: rgba( 123,11,233,.6); 
text-overflow: ellipsis; 
white-space:nowrap; 
overflow:hidden; 
color: white; 
; 
</style> 
</head> 
<body> 
<div class="container"> 
<p class="son"> 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 
容 内 容 </p> 
</div> 
<script> 
</script> 
</body> 
</html> 


效果 如 图 10-4 所 示 。 
首先 ，white-space 属性 用 来 设 定 如 何 处 理 元 素 中 的 空白 符 。 将 white-space 设 定 为 nowrap 表示 
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文本 不 会 换行 ， 一 直 沿 着 一 行 显示 。overflow HFE 
元 素 如 何 处 理 溢出 内 容 , 因为 之 前 设 定 了 文字 一 行 显示 ， 
因此 肯定 会 超出 区 域 ， 设 置 overflow 为 hidden， 则 超出 
的 文本 将 会 被 隐藏 。text-overflow 表示 当 文 本 溢出 时 要 
进行 什么 操作 ， 将 其 设 定 成 ellipsis， 表 示 用 省 略 号 来 代 
蔡 被 修剪 的 部 分 : 也 可 以 指定 一 个 字符 串 ， 这 样 就 会 由 
字符 串 来 代 蔡 被 修剪 的 部 分 。 

使 用 截断 功能 还 可 以 实现 一 些 其 他 的 效果 ， 比 如 下 
面 的 例子 就 实现 了 鼠标 移入 时 显示 截断 内 容 、 鼠 标 移出 图 10-4 
时 隐藏 截断 内 容 。 

【示例 】 

<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

<style type="text/css"> 











.Container{ 
width: 100%; 
height: 200px; 
background: rgba(0 ,0, 0, .6); 
} 
.Son{ 
width: 300px; 
background: rgba(123,11,233,.6); 
text-overflow: ellipsis; 
white-space:nowrap; 
overflow:hidden; 
color: white; 
} 
.son:hover{ 
overflow: visible; 
} 
</style> 
</head> 
<body> 
<div class="container"> 


<p class="son"> 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 容 内 </p> 





</div> 
<script> 
</script> 
</body> 
</html> 


这 里 ， 将 鼠标 移出 时 的 overflow 值 设 定 为 visible， 表 示 超 出 内 容 区 域 可 见 。 
10.2 ”内 边 距 边界 


内 边 距 边界 即 padding， 通 俗 地 说 就 是 留 白 的 部 分 。 开 发 者 不 希望 内 容 部 分 的 文字 、 图 形 等 贴 
着 边 显示 ， 这 时 就 需要 指定 padding T. padding 也 分 上 上、 下、 左 、 右 4 种 ， 分 别 对 应 padding-top. 
padding-right、padding-bottom、padding-left。 既 可 以 分 别 设置 ， 也 可 以 都 设置 在 padding 中 。 如 果 
要 在 padding 中 设置 上 、 下 、 左 、 右 4 个 方向 的 边 距 ， 要 按 顺 序 设置 ， 依 次 为 上 、 右 、 下 、 左 。 下 
面 的 例子 将 展示 设置 padding 和 不 设置 padding 的 区 别 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
el 
padding: 0; 
margin: 0; 
} 
.Container{ 
width: 100%; 
height: 200px; 
background: rgba(0 ,0, 0, .6); 
b 
.container-nopadding í 
width: 100%; 
height: 200px; 
background: rgba(0 ,0, 0. .6); 
padding: 10px; 
margin-top: 10px; 
} 
img{ 
width: 100px; 
height: 66px; 
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} 
</style> 
</head> 
<body> 
<div class="container"> 
<img src="a.jpg"> 
</div> 
<div class="container-nopadding"> 
<img src="a.jpg"> 
</div> 
<script> 
</script> 
</body> 
</html> 


效果 如 图 10-5 所 示 。 这 需要 一 个 过 程 。 





图 10-5 


padding 也 可 以 设置 成 百分比 值 。 如 果 设 置 成 百分比 值 ， 那 么 它 参照 的 是 父 元 素 的 宽度 。 


10.3 ”边框 边界 


边框 边界 是 一 个 元 素 外 面 的 一 层 边框 , 用 来 包围 元 素 内 容 和 留 白 部 分 。 在 CSS 中 , 使 用 border 
来 设置 元 素 的 边框 。 

要 想 完 整地 设 定 一 个 边框 ， 边 框 颜色 、 边 框 像素 值 、 边 框 种 类 这 三 个 属性 值 不 能 少 ， 分 别 对 
应 的 属性 是 border-color、border-width、border-styleg。 如 果 缺 少 一 个 ， 边 框 就 不 会 显示 。 边 框 的 像 
素 值 越 大 ， 边 框 越 粗 。border-style 有 很 多 种 ， 最 常用 的 是 solid 〈 实 线 边框 ) 。 
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同样 ， 这 三 个 属性 也 可 以 放 在 一 起 写 ， 即 border， 只 要 按 顺 序 定义 border 即 可 。 


元 素 边 框 的 一 个 例子 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
i 
padding: 0; 
margin: 0; 
} 
.Container{ 
width: 100%; 
height: 200px; 
background: white; 
; 
.border{ 
width: 80px; 
height: 80px; 
border: 3px solid rgb(0, 0, 0); 
margin: 10px; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="border"></div> 
</div> 
<script> 
</script> 
</body> 
</html> 


效果 如 图 10-6 所 示 。 


经 常会 看 到 一 些 边框 的 棱角 处 有 一 定 的 弧度 。 想 实现 这 个 效果 并 不 难 ，CSS 中 有 一 个 
border-radius 属性 ， 专 门 用 来 设置 边框 棱角 的 这 个 弧度 ， 这 个 弧度 被 称 为 圆 角 。 











网 角 需要 设 定 的 是 一 个 像素 值 。 图 10-7 展示 了 圆 角 像素 值 大 小 和 展示 效果 的 关 





图 形 是 宽 、 高 均 为 80px 的 正方 形 。 





从 上 面 的 例子 中 可 以 看 出 ， 随 着 border-radius 值 的 增 大 ,元 素 的 棱角 处 越 来 越 圆 




















润 ， 当 增 大 到 


一 定 程度 后 维持 圆 形 不 再 变化 。 其 实 ， 当 border-radius 的 值 为 宽 高 的 一 半 时 ， 原 来 的 正方 形 就 变 成 


T 











HÉ. 
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10px 











图 10-7 


图 10-6 


border-radius 其 实 也 是 一 个 复合 属性 ， 包 括 border-top-left-radius、border-bottom-left-radius、 
border-top-right-radius、border-bottom-right-radius， 分 别 用 来 设 定 左上 角 、 左 下 角 、 右 上 角 、 右 下 角 
的 贺 角 。 当 开发 者 深入 了 解 这 些 属性 时 ， 就 会 发 现 ， 其 实 每 个 贺 角 都 可 以 设 定 两 个 值 ， 如 图 10-8 
所 示 。 








No rounded comer Rounded using an Rounded using an| 
arc of circle arc of ellipse 





图 10-8 
每 个 角 的 圆 角 都 可 以 设 定 长 的 部 分 和 宽 的 部 分 ， 二 者 可 以 设 定 不 同 的 值 。 之 前 都 是 将 长 和 宽 
设 定 成 相同 的 值 ， 而 且 这 个 值 就 是 圆 角 处 圆 形 的 圆心 。 
利用 这 个 知识 ， 开 发 者 既 可 以 设 定 出 各 种 各 样 的 圆 角 ， 也 可 以 利用 圆 角 制作 各 种 各 样 的 形状 。 
除了 border 的 基础 用 法 ， 开 发 者 还 可 以 使 用 border 制作 各 种 各 样 的 图 形 。 下 面 我 们 进行 一 个 
实验 ， 将 元 素 的 宽 、 高 设置 为 0， 并 分 别 设置 出 不 同方 向 的 边框。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 





<style type="text/css"> 


.Container{ 





width: 100%; 
height: 200px; 
background: white; 
; 
-borderí 
width: 0; 
height: 0; 
border-top: solid 100px red; 
border-left: solid 100px green; 
border-bottom: solid 100px black; 
border-right: solid 100px pink; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="border"></div> 
</div> 
<script> 
</script> 
</body> 
</html> 


效果 如 图 10-9 所 示 。 











图 10-9 


从 上 面 的 例子 可 以 看 到 ， 其 实 每 一 个 边框 在 内 部 没有 内 容 宽 高 时 都 是 一 个 三 角形 。 利 用 这 个 
方法 ， 开 发 者 可 以 绘制 出 三 角形 的 图 案 ， 只 要 留 取 一 个 方向 的 border 即 可 : 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 


<meta name=' 





viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
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ee 
padding: 0; 
margin: 0; 


1 
了 了 


.Container{ 
width: 100%; 
height: 200px; 
background: white; 
} 
.border{ 
width: 0; 
height: 0; 
border-top: solid 100px transparent; 
border-left: solid 100px transparent; 
border-bottom: solid 200px black; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="border"></div> 
</div> 
<script> 
</script> 
</body> 
</html> 


效果 如 图 10-10 所 示 。 





图 10-10 
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上 面 的 代码 将 不 需要 的 边框 部 分 的 颜色 设 定 为 transparent， 从 而 显示 开发 者 需要 的 三 角形 。 通 
过 控制 各 个 边框 的 像素 ， 开 发 者 可 以 十 分 方便 地 绘制 出 各 种 形状 的 三 角形 。 


10.4 ”外边 距 边界 


外 边 距 也 就 是 元 素 与 外 围 的 距离 ， 主 要 用 来 控制 元 素 和 元 素 之 问 的 间距 。margin 属性 在 一 个 
声明 中 设置 所 有 外 边 距 属性 ， 可 以 有 1 一 4 个 值 ， 分 别 为 margin-top, margin-right, margin-left, 
margin-bottom 。 

如 果 要 使 用 margin 进行 设 定 ， 对 应 的 顺序 为 上 、 右 、 下 、 左 。 刚 才 说 到 ，margin 可 以 设 定 1 一 
4 个 值 ， 下 面 来 看 一 下 设 定 不 同 个 数 的 值 是 什么 效果 。 

(1) margin:10px 5px 15px 20px; 
上 边 距 是 10px. 
右边 距 是 Spx。 
下 边 距 是 15px。 
左边 距 是 20px。 


(2) margin:10px 5px 15px; 
© 上边 距 是 10px。 
° ”右边 距 和 左边 距 是 5px。 
° 下 边 距 是 15px。 

(3) margin:10px Spx; 


° 上 边 距 和 下 边 距 是 10px。 
° 右边 距 和 左边 距 是 5px。 


margin 的 设 定 非常 灵活 ， 既 可 以 是 正 数 ， 也 可 以 是 负数 ， 还 可 以 是 百分数 。 因 为 margin 对 元 
素 间 位 置 的 调节 非常 灵活 ， 所 以 经 常用 来 代 蔡 position 属性 对 元 素 进行 定位 。 


Flex 布局 是 W3C 于 2009 年 提出 的 一 种 新 的 布局 方式 。 传 统 的 CSS 布局 方式 经 常会 出 现 一 些 
很 难 控制 的 问题 ， 比 如 垂直 居中 、 多 列 布局 的 自 适 应 问题 等 。Flex 布局 方式 可 以 很 方便 地 实现 这 
些 功 能 ， 而 且 不 容易 出 现 布 局 错误 。 

最 重要 的 是 , 在 移动 端 Web 开发 过 程 中 , 采用 Flex 布局 模式 进行 开发 的 效率 是 非常 高 的 。 Flex 
布局 更 适合 HS 应 用 开发 。 

Flex， 顾 名 思 义 ， 就 是 非常 灵活 的 一 种 布局 方式 。 一 般 的 Flex 布局 中 都 会 有 一 个 整体 元 素 ， 
称 为 FlexBox。 这 个 容器 元 素 内 部 包含 着 的 其 他 元 素 可 以 很 灵活 地 适应 整个 容器 的 变化 ， 而 不 会 出 
现 布 局 上 的 亲 乱 。 注 意 , 在 FlexBox 元 素 中 , 元 素 的 某 些 属性 会 失效 , 包括 float, clear 及 vertical-align 
属性 。 

弹性 容器 指 的 是 使 用 Flex 布局 整体 的 父 元 素 。 这 个 父 元 素 的 所 有 子 元 素 都 属于 这 个 Flex 容器 
的 成 员 , 被 称 为 弹性 项 目 。 要 想 让 一 个 容器 成 为 弹性 容器 ,必须 设置 这 个 元 素 的 display 属性 为 flex 
或 者 inline-flex。flex 和 inline-flex 都 能 将 一 个 元 素 设 定 为 弹性 容器 , 区 别 是 使 用 flex 属性 值 时 这 个 
元 素 就 是 一 个 块 级 元 素 的 弹性 容器 ， 使 用 inline-flex 属性 值 时 这 个 元 素 就 是 一 个 保持 inline 属性 的 
弹性 容器 。 

弹性 容器 和 弹性 项 目 都 可 以 通过 设 定 一 些 属 性 达到 开发 者 想 要 的 布局 效果 ， 那 么 一 个 弹性 容 
器 的 内 部 是 什么 样 的 呢 ? 

每 一 个 弹性 容器 都 有 一 个 水 平 轴 和 一 个 纵 轴线 ， 弹 性 容器 中 的 弹性 项 目 要 根据 这 两 条 轴线 的 
方向 进行 排列 。 具 体 按照 哪个 轴线 排列 ， 可 以 用 弹性 容器 的 flex-direction 属性 进行 设 定 。 

flex-direction 属性 有 4 个 属性 值 : row，row-reverse，column，column-reverse。 它 们 分 别 表示 
沿 水 平 轴 线 从 左 向 右 排序 ， 沿 水 平 轴线 从 右 向 左 排序 ， 沿 紧 直 轴 从 上 到 下 排列 ， 以 及 沿 紧 直 轴 从 下 
到 上 排列 。 
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下 面 给 出 一 个 Flex 布局 的 例子 ， 对 每 个 子 元 素 都 进行 了 编号 ， 可 以 从 中 体会 一 下 弹性 容器 不 
同 的 flex-direction 属性 值 是 如 何 影响 弹性 项 目 布局 效果 的 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
„container { 
display:flex; 
display:-webkit-flex; 
border: 2px solid black; 
padding: 20px; 
margin: 20px; 
} 
.item{ 
background: green; 
width: 100px; 
height: 100px; 
margin: 10px; 
font-weight: bold; 
} 
.TOW{ 
flex-direction: row; 
} 
.TOW-reverse{ 
flex-direction: row-reverse; 
} 
.columní 
flex-direction: column; 
} 
.Column-reverse{ 
flex-direction: column-reverse; 
} 
</style> 
</head> 
<body> 
<div class="container row"> 
<div class="item">1</div> 
<div class="item">2</div> 
<div class="item">3</div> 
<div class="item">4</div> 
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</div> 

<div class="container row-reverse"> 
<div class="item">1</div> 
<div class="item">2</div> 
<div class="item">3</div> 
<div class="item">4</div> 

</div> 

<div class="container column"> 
<div class="item">1</div> 
<div class="item">2</div> 
<div class="item">3</div> 
<div class="item">4</div> 

</div> 

<div class="container column-reverse"> 
<div class="item">1</div> 
<div class="item">2</div> 
<div class="item">3</div> 
<div class="item">4</div> 

</div> 

</body> 

</html> 


打开 浏览 器 ， 可 以 直接 观察 到 flex-direction 属性 对 于 元 素 布局 的 影响 。 使 用 row 属性 值 时 ， 
元 素 会 从 左 侧 开始 布局 ， 使 用 row-reverse 属性 值 时 ， 元 素 会 从 右 侧 开始 布局 。 使 用 column 和 
column-reverse 时 结果 类 似 ， 只 是 变 成 竖 直 方向 的 布局 了 。 

现在 ， 缩 小 网 页 的 屏幕 ， 来 看 一 下 会 发 生 什么 效果 。 当 缩小 网 页 屏幕 到 一 定 范围 后 ， 所 有 弹 
性 项 目 都 会 发 生 等 比例 的 收缩 ， 从 而 保证 元 素 的 排列 布局 没有 任何 紊乱 ， 这 就 是 Flex 布局 最 惊人 
的 地 方 , 如 何 控制 弹性 项 目 收缩 的 程度 将 在 下 面 的 例子 中 继续 介绍 。 这 个 特性 也 是 为 什么 弹性 项 目 
广泛 应 用 于 移动 端的 原因 ， 它 可 以 很 好 地 适应 各 种 分 辨 率 的 手机 屏幕 。 

另外 一 个 需要 注意 的 是 ， 当 为 父 元 素 设 定 display 属性 时 ， 针 对 -webkit 内 核 的 浏览 器 需要 使 用 
-webkit-flex 或 者 -webkit-inline-flex 属性 值 来 进行 兼容 。 

在 上 面 的 例子 中 ， 不 管 开发 者 怎么 在 宽度 上 缩小 父 容器 ， 其 弹性 项 目 都 会 以 牺牲 自身 原本 的 
大 小 来 适应 父 元 素 的 宽度 ， 并 排列 在 一 行 上 。 但 是 有 的 时 候 开发 者 并 不 想 改变 元 素 形 状 ， 而 是 当 父 
元 素 宽度 变 小 的 时 候 ， 子 元 素 可 以 自动 换行 。Flex 布局 也 提供 了 满足 这 个 需求 的 方法 ， 可 以 通过 
为 父 元 素 设 定 flex-wrap 属性 来 实现 。 

flex-wrap 属性 有 三 个 属性 值 。nowrap 属性 值 是 默认 属性 值 ， 表 示 不 进行 换行 。wrap 和 
wrap-reverse 属性 值 可 以 实现 元 素 的 自动 换行 ， 并 且 会 保持 形状 不 变 。 当 父 元 素 收缩 时 ， 子 元 素 会 
保证 自己 的 宽度 ， 一行 放 不 下 的 情况 下 会 选择 换行 。 其 中 ，wrap 是 正 向 换行 ，wrap-reverse 是 反 向 
换行 。 

【示例 】 

<!DOCTYPE> 

<html> 
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<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width. initial-scale=1, maximum-scale=1"/> 

<style type="text/css"> 

„container { 
display:flex; 
display:-webkit-flex; 
border: 2px solid black; 
padding: 20px; 
margin: 20px; 
flex-direction: row; 

} 

.item{ 
background: green; 
width: 100px; 
height: 100px; 
margin: 10px; 
font-weight: bold; 

} 

nowrap{ 
flex-wrap: nowrap; 

} 

.wrap{ 
flex-wrap: wrap; 

} 

.Wrap-reverse{ 
flex-wrap: wrap-reverse; 

} 

</style> 

</head> 

<body> 

<div class="container nowrap"> 
<div class="item">1</div> 
<div class="item">2</div> 
<div class="item">3</div> 
<div class="item">4</div> 
<div class="item">5</div> 
<div class="item">6</div> 
<div class="item">7</div> 

</div> 





<div class="container wrap"> 
<div class="item">1</div> 
<div class="item">2</div> 
<div class="item">3</div> 
<div class="item">4</div> 
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<div class="item">5</div> 
<div class="item">6</div> 
<div class="item">7</div> 

</div> 

<div class="container wrap-reverse"> 
<div class="item">1</div> 
<div class="item">2</div> 
<div class="item">3</div> 
<div class="item">4</div> 
<div class="item">5</div> 
<div class="item">6</div> 
<div class="item">7</div> 

</div> 

</body> 

</html> 


(1) flex-wrap 为 no-wrap 时 的 效果 如 图 11-1 所 示 。 


图 11-1 








(2) flex-wrap 为 wrap 时 的 效果 如 图 11-2 所 示 。 
(3) flex-wrap 为 wrap-reverse 时 的 效果 如 图 11-3 所 示 。 


图 11-2 图 11-3 

可 以 看 到 ， 如 果 弹 性 容器 设置 为 允许 子 元 素 换 行 ， 那 么 这 些 子 元 素 会 保证 自己 的 大 小 不 发 生 
变化 。 

当 元 素 在 一 行内 显示 时 ， 如 何 规范 地 规定 元 素 的 排列 方式 呢 ? 在 Flex 布局 中 可 以 为 父 元 素 设 
定 justify-content 属性 。 这 个 属性 有 五 个 选项 值 ， 可 以 用 来 设 定 元 素 不 同 的 对 齐 方式 ， 类似 于 Word 
中 文字 的 对 齐 方 式 。 

© flex-start: 设 定 为 左 对 齐 。 

© flex-end: 设 定 为 右 对 齐 。 
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@ center: 设 定 为 居中 对 齐 。 
© space-between: 设 定 为 两 端 对 齐 。 


© space-around: 设 定 每 个 元 素 两 侧 的 距离 都 相等 。 
为 了 直观 地 看 一 下 justify-content 属性 值 的 作用 ， 特 给 出 下 面 的 例子 。 





【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 


<style type="text/css"> 

.Container{ 
display:flex; 
display:-webkit-flex; 
border: 2px solid black; 
padding: 20px; 
margin: 20px; 
flex-direction: row; 
flex-wrap: nowrap; 

} 

„iteml{ 
background: green; 
width: 200px; 
height: 100px; 
margin: 10px; 
font-weight: bold; 

} 

.item2{ 
background: green; 
width: 300px; 
height: 100px; 
margin: 10px; 
font-weight: bold; 

h 

.item3{ 
background: green; 
width: 100px; 
height: 100px; 
margin: 10px; 
font-weight: bold; 

} 

.flex-start{ 
justify-content: flex-start; 
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.flex-end{ 

justify-content: flex-end; 
} 
.space-betweení 

justify-content: space-between; 
J: 
.Space-around{ 

justify-content: space-around; 
.Center{ 

justify-content: center; 


; 


</style> 

</head> 

<body> 

<div class="container flex-start"> 
<div class="item1">1</div> 
<div class="item2">2</div> 
<div class="item3">3</div> 

</div> 

<div class="container flex-end"> 
<div class="item1">1</div> 
<div class="item2">2</div> 
<div class="item3">3</div> 

</div> 

<div class="container center"> 
<div class="item1">1</div> 
<div class="item2">2</div> 
<div class="item3">3</div> 

</div> 

<div class="container space-between"> 
<div class="item1">1</div> 
<div class="item2">2</div> 
<div class="item3">3</div> 

</div> 

<div class="container space-around"> 
<div class="item1">1</div> 
<div class="item2">2</div> 
<div class="item3">3</div> 

</div> 

</body> 

</html> 
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(1) 设 定 为 flex-start 时 效果 如 图 11-4 所 示 。 


图 11-4 


(2) 设 定 为 flex-end 时 效果 如 图 11-5 所 示 。 


11-5 


(3) 设 定 为 center 时 效果 如 图 11-6 所 示 。 


图 11-6 
(4) 设 定 为 space-between 时 效果 如 图 11-7 所 示 。 


图 11-7 
(5) 设 定 为 space-around 时 效果 如 图 11-8 所 示 。 


图 11-8 


从 上 面 的 例子 可 以 看 出 ， 使 用 justify-content 属性 可 以 很 方便 地 设 定 弹性 项 目 在 弹性 容器 中 的 
对 齐 方 式 。 

在 之 前 的 例子 中 都 是 以 水 平方 向 为 例 的 ， 这 些 例子 中 的 元 素 高 度 都 是 相同 的 。 如 果 元 素 的 高 
度 不 同 ， 那 么 在 纵向 方向 上 也 需要 设 定 一 些 对 齐 方 式 。Flex 布局 中 也 为 开发 者 提供 了 在 另 一 个 方 
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向 上 对 齐 的 设 定 ， 这 个 属性 就 是 align-items。align-items 有 5 个 选项 值 ， 分 别 是 : 


stretch 设 定 元 素 占 满 整个 长 度 ， 前 提 是 没有 指定 这 些 元 素 的 高 度 ， 这 是 默认 值 。 
flex-start 设 定 元 素 在 起 点 对 齐 。 

flex-end 设 定 元 素 在 终点 对 齐 。 

center 

baseline 





从 下 面 的 例子 可 以 直观 地 看 到 align-items 属性 是 如 何 工作 的 。 
【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" > 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 

„container í 


} 


display: flex; 
display:-webkit-flex; 
border: 2px solid black; 
padding: 20px; 

margin: 20px; 
flex-direction: row; 
flex-wrap: nowrap; 


justify-content: center; 


item1{ 


} 


padding-top: 10px; 
background: green; 
width: 200px; 
height: 100px; 
margin: 10px; 
font-weight: bold; 


Jitem2{ 


padding-top: 50px; 
background: green; 
width: 300px; 
height: 200px; 


margin: 10px; 


; 


font-weight: bold; 


.item3{ 
background: green; 
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width: 100px; 
height: 50px; 
margin: 10px; 
font-weight: bold; 
} 
.item4{ 
padding-top: 100px; 
background: green; 
width: 100px; 
height: 150px; 
margin: 10px; 
font-weight: bold; 
; 
.flex-start{ 
align-items: flex-start; 
} 
.flex-end{ 
align-items: flex-end; 
} 
.Center{ 
align-items: center; 
} 
.Stretch{ 
align-items: stretch; 
} 
„baseline { 
align-items: baseline; 
} 
</style> 
</head> 
<body> 
<div class="container flex-start"> 
<div class="item1">1</div> 
<div class="item2">2</div> 
<div class="item3">3</div> 
<div class="item4">4</div> 
</div> 





<div class="container flex-end"> 
<div class="item1">1</div> 
<div class="item2">2</div> 
<div class="item3">3</div> 
<div class="item4">4</div> 

</div> 

<div class="container center"> 
<div class="item1">1</div> 
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<div class="item2">2</div> 
<div class="item3">3</div> 
<div class="item4">4</div> 

</div> 

<div class="container baseline"> 
<div class="item1">1</div> 
<div class="item2">2</div> 
<div class="item3">3</div> 
<div class="item4">4</div> 

</div> 

<div class="container stretch"> 
<div class="item1">1</div> 
<div class="item2">2</div> 
<div class="item3">3</div> 
<div class="item4">4</div> 

</div> 

</body> 

</html> 


在 这 个 例子 中 ， 有 几 处 修改 需要 注意 。 首 先 ， 开 发 者 为 不 同 的 item 元 素 添 加 了 不 同 的 
padding-top 值 ， 这 是 为 了 能 够 看 出 baseline 的 作用 按照 第 一 行文 字 的 基线 对 齐 ) 。 其 次 ， 修 改 了 
不 同 item 元 素 的 高 度 ， 从 而 能 够 看 出 使 用 align-items 属性 后 元 素 展现 的 变化 情况 。 


(1) 设置 为 flex-start 时 效果 如 图 11-9 所 示 。 


图 11-9 
(2) 设置 为 flex-end 时 效果 如 图 11-10 所 示 。 


图 11-10 
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(3) 设置 为 center 时 效果 如 图 11-11 所 示 。 








图 11-11 





(4) 设置 为 baseline 时 效果 如 图 11-12 所 示 。 


图 11-12 


G) 设置 为 默认 值 时 效果 如 图 11-13 所 示 。 


图 11-13 
































通过 这 个 示例 就 可 以 很 清晰 地 明确 align-items 是 如 何 影响 元 素 对 齐 方式 的 了 。 注 意 ， 当 设 定 
为 stretch 时 ， 由 于 为 元 素 设 定 了 高 度 ， 因 此 最 后 的 表现 形式 看 起 来 和 设 定 为 flex-start 的 情况 差 不 
多 。 如 果 没 有 设 定 高 度 ， 那 么 每 个 元 素 的 高 度 都 会 等 于 100%。 

当 有 多 个 元 素 并 且 设 置 了 元 素 可 以 换行 时 ， 可 能 会 出 现在 弹性 容器 内 部 中 包含 了 很 多 行 元 素 。 


以 水 3 





“为 例 ， 这 么 多 行 的 元 素 ,每 一 行 都 有 一 个 主轴 ， 而 这 些 主轴 也 可 以 设置 对 齐 方式 。 这 个 属性 


是 align-content, 可 以 理解 为 把 每 一 行 元 素 看 成 是 一 个 元 素 , 然后 在 纵 轴 方 向 按照 不 同 的 方式 排列 ， 





类 他 


F 之 前 的 align-items， 只 不 过 这 里 排列 的 单位 是 轴线 。 


align-content 属性 包含 的 属性 值 和 justify-content 属性 包含 的 属性 值 完全 相同 , 可 以 通过 下 面 的 
例子 来 体会 一 下 align-content 属性 是 如 何 对 轴线 进行 排列 的 。 
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【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width. initial-scale=1, maximum-scale=1"/> 

<style type="text/css"> 

.Container{ 
display:flex; 
display:-webkit-flex; 
border: 2px solid black; 
padding: 20px; 
margin: 20px; 
flex-direction: row; 
flex-wrap: wrap; 
justify-content: center; 
height: 300px; 

} 

„iteml{ 
background: green; 
width: 200px; 
height: 30px; 
margin: 10px; 
font-weight: bold; 

} 

.item2 í 
background: green; 
width: 300px; 
height: 30px; 
margin: 10px; 
font-weight: bold; 

} 

.item3{ 
background: green; 
width: 100px; 
height: 30px; 
margin: 10px; 
font-weight: bold; 

} 

.item4{ 
background: green; 
width: 100px; 
height: 30px; 
margin: 10px; 
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font-weight: bold; 

} 

.item5{ 
background: green; 
width: 200px; 
height: 30px; 
margin: 10px; 
font-weight: bold; 

} 

-item6{ 
background: green; 
width: 300px; 
height: 30px; 
margin: 10px; 
font-weight: bold; 

} 

.item7í 
background: green; 
width: 80px; 
height: 30px; 
margin: 10px; 
font-weight: bold; 

} 

.item8í 
background: green; 
width: 50px; 
height: 30px; 
margin: 10px; 
font-weight: bold; 

} 

.item9{ 
background: green; 
width: 120px; 
height: 30px; 
margin: 10px; 
font-weight: bold; 

} 

.item10{ 
background: green; 
width: 200px; 
height: 30px; 
margin: 10px; 
font-weight: bold; 

b 


.flex-start{ 
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align-content: flex-start; 

} 

flex-end{ 
align-content: flex-end; 

} 

.Center{ 
align-content: center; 

上 

„stretch{ 
align-content: stretch; 

} 

.Space-around{ 
align-content: space-around; 

h 

.space-betweení 
align-content: space-between; 

} 

</style> 

</head> 

<body> 

<div class="container flex-start"> 
<div class="item1">1</div> 
<div class="item2">2</div> 
<div class="item3">3</div> 
<div class="item4">4</div> 
<div class="item5">5</div> 
<div class="item6">6</div> 
<div class="item7">7</div> 
<div class="item8">8</div> 
<div class="item9">9</div> 
<div class="item10">10</div> 

</div> 

<div class="container flex-end"> 
<div class="item1">1</div> 
<div class="item2">2</div> 
<div class="item3">3</div> 
<div class="item4">4</div> 
<div class="item5">5</div> 
<div class="item6">6</div> 
<div class="item7">7</div> 
<div class="item8">8</div> 
<div class="item9">9</div> 
<div class="item10">10</div> 

</div> 


<div class="container center"> 
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<div class="item1">1</div> 
<div class="item2">2</div> 
<div class="item3">3</div> 
<div class="item4">4</div> 
<div class="item5">5</div> 
<div class="item6">6</div> 
<div class="item7">7</div> 
<div class="item8">8</div> 
<div class="item9">9</div> 


<div class="item10">10</div> 


</div> 

<div class="container strench"> 
<div class="item1">1</div> 
<div class="item2">2</div> 
<div class="item3">3</div> 
<div class="item4">4</div> 
<div class="item5">5</div> 
<div class="item6">6</div> 
<div class="item7">7</div> 
<div class="item8">8</div> 
<div class="item9">9</div> 


<div class="item10">10</div> 


</div> 


<div class="container space-between"> 


<div class="item1">1</div> 
<div class="item2">2</div> 
<div class="item3">3</div> 
<div class="item4">4</div> 
<div class="item5">5</div> 
<div class="item6">6</div> 
<div class="item7">7</div> 
<div class="item8">8</div> 
<div class="item9">9</div> 


<div class="item10">10</div> 


</div> 


<div class="container space-around"> 


<div class="item1">1</div> 
<div class="item2">2</div> 
<div class="item3">3</div> 
<div class="item4">4</div> 
<div class="item5">5</div> 
<div class="item6">6</div> 
<div class="item7">7</div> 
<div class="item8">8</div> 
<div class="item9">9</div> 
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<div class="item10">10</div> 
</div> 
</body> 
</html> 


(1) 属性 值 为 flex-start 时 效果 如 图 11-14 所 示 。 





图 11-14 
(2) 属性 值 为 flex-end 时 效果 如 图 11-15 所 示 。 














图 11-15 


(3) 属性 值 为 center 时 效果 如 图 11-16 所 示 。 











图 11-16 
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(4) 属性 值 为 strench 时 效果 如 图 11-17 所 示 。 











图 11-17 


(15) 属性 值 为 space-around 时 效果 如 图 11-18 所 示 。 








图 11-18 
(6) 属性 值 为 space-between 时 效果 如 图 11-19 所 示 。 








图 11-19 


至 此 就 介绍 完 所 有 可 以 在 弹性 容器 中 设置 的 所 有 属性 了 ， 这 些 属性 都 是 在 父 元 素 中 设 定 的 ， 


通过 为 父 元 素 设 定 这 些 属性 ， 可 以 改变 其 中 子 元 素 的 排 布 方式 。 


子 元 素 也 可 以 设 定 一 些 属性 ， 用 来 控制 每 一 个 子 元 素 在 弹性 布局 中 个 性 化 的 展现 效果 。 
第 一 个 要 介绍 的 属性 是 order 属性 ， 用 来 设 定 元 素 的 排列 顺序 。 它 的 原理 和 CSS 中 的 z-index 





类 似 ， 每 一 个 元 素 都 可 以 设 定 z-index 属性 ， 被 设置 的 值 越 低 ， 在 排列 的 时 候 就 越 会 排 在 前 面 。 如 
果 没 有 给 元 素 设 定 order 属性 值 ， 就 默认 为 0。 如 果 多 个 元 素 的 order 属性 值 是 相同 的 ， 那么 这 些 元 
素 的 排列 方式 会 按照 HTML 结构 中 元 素 定义 的 顺序 进行 排列 。 
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【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

<style type="text/css"> 

„container { 
display:flex; 
display:-webkit-flex; 
border: 2px solid black; 
margin: 20px; 
flex-direction: row; 
flex-wrap: nowrap; 

} 

„iteml{ 
background: green; 
width: 200px; 
height: 200px; 
font-weight: bold; 
border: 1px solid red; 
order: 5; 

} 

.item2 í 
background: green; 
width: 300px; 
height: 200px; 
font-weight: bold; 
border: 1px solid red; 
order: 4; 

} 

.item3{ 
background: green; 
width: 100px; 
height: 200px; 
font-weight: bold; 
border: 1px solid red; 
order: 2; 

} 

.item4{ 
background: green; 
width: 100px; 
height: 200px; 
font-weight: bold; 
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border: 1px solid red; 
order: 1; 
} 
„item5{ 
background: green; 
width: 300px; 
height: 200px; 
font-weight: bold; 
border: 1px solid red; 
b 
.flex-start{ 
align-items: flex-start; 
b 
.flex-end{ 
align-items: flex-end; 
} 
.Center{ 
align-items: center; 
} 
.Stretch{ 
align-items: stretch; 
} 
„baseline í 
align-items: baseline; 


} 


</style> 

</head> 

<body> 

<div class="container"> 
<div class="item1">1</div> 
<div class="item2">2</div> 
<div class="item3">3</div> 
<div class="item4">4</div> 
<div class="item5">5</div> 

</div> 

</body> 

</html> 


效果 如 图 11-20 所 示 。 

这 里 除了 第 五 个 元 素 以 外 都 设 定 了 order 值 。 如 果 没 有 设 定 order 属性 值 ， 元 素 就 会 按照 正常 
的 顺序 12345 进行 排列 。 上 面 设 定 了 order 属性 之 后 会 根据 从 小 到 大 的 情况 依次 进行 排列 。 由 于 第 
五 个 元 素 没有 设 定 order 属性 值 ， 因 此 其 使 用 的 是 默认 值 0， 排 在 第 一 个 。 

纵向 排列 的 元 素 使 用 order 属性 的 结果 和 横向 是 相同 的 。 
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图 11-20 





下 面 要 介绍 的 几 个 属性 是 十 分 重要 的 。 在 这 之 前 考虑 下 面 一 个 经 常会 在 移动 端 H5 开发 出 现 的 
问题 。 

由 于 H5 的 开发 ， 需 要 适应 许多 不 同 大 小 的 屏幕 。 有 时 ， 要 求 界面 中 的 一 些 元 素 是 可 以 根据 屏 
幕 的 宽度 变化 自 适应 改变 大 小 的 。 如 何 很 好 地 编写 这 种 自 适应 代码 呢 ? 传统 的 CSS 中 有 很 多 方法 ， 
比如 响应 式 布局 、 之 前 介绍 的 特殊 CSS 元 素 单位 等 。 在 Flex 布局 中 ， 可 以 通过 为 元 素 设 定 一 些 属 
性 轻松 地 解决 这 种 自 适 应 布局 问题 。 最 重要 的 是 ， 它 比 其 他 方法 更 加 灵活 。 


(1) 第 一 个 和 自 适应 相关 的 属性 是 flex-grow 属性 。 这 个 属性 的 作用 是 ， 以 水 平 排列 的 元 素 
为 例 ， 当 空间 变 大 时 ， 容 器 内 的 元 素 可 以 按照 设 定 的 比例 分 割 多 出 的 空间 。 通 过 下 面 的 例子 来 形象 
地 理解 一 下 这 个 属性 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
„container { 
display:flex; 
display:-webkit-flex; 
border: 2px solid black; 
margin: 20px; 
flex-direction: row; 
flex-wrap: nowrap; 
} 
iteml1{ 
background: green; 
width: 100px; 
height: 200px; 
font-weight: bold: 
border: 1px solid red; 
h 
.item2{ 
background: green; 
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width: 200px; 
height: 200px; 
font-weight: bold; 
border: 1px solid red; 
; 
„item3{ 
background: green; 
width: 50px; 
height: 200px; 
font-weight: bold; 
border: 1px solid red; 
} 
.item4{ 
background: green; 
width: 50px; 
height: 200px; 
font-weight: bold; 
border: 1px solid red; 
} 
.item5í 
background: green; 
width: 100px; 
height: 200px; 
font-weight: bold; 
border: 1px solid red; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="item1">1</div> 
<div class="item2">2</div> 
<div class="item3">3</div> 
<div class="item4">4</div> 
<div class="item5">5</div> 
</div> 
</body> 
</html> 


上 面 的 代码 效果 图 如 图 11-21 所 示 。 
目前 这 五 个 弹性 子 元 素 的 宽度 之 和 还 不 能 填 满 整个 弹性 父 元 素 。 当 没有 为 任何 元 素 设 定 
flex-grow 属性 值 时 ， 它 们 的 默认 值 都 是 0， 表示 不 对 剩余 没有 被 填 满 的 父 元 素 空间 进行 分 割 。 
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图 11-21 
下 面 修改 iteml 的 CSS 代码 ， 为 其 添加 flex-grow 属性 : 
„iteml{ 
background: green; 
width: 100px; 
height: 200px; 


font-weight: bold; 
border: 1px solid red; 
flex-grow: 1; 

} 


再 次 刷新 网 页 ， 效 果 如 图 11-22 所 示 。 





图 11-22 


当 将 flex-grow 属性 设置 为 1 后 ， 第 一 个 元 素 的 宽度 分 割 了 所 有 剩余 的 父 元 素 空间 。 接 下 来 修 
改 item2 的 代码 : 
.item2{ 
background: green; 
width: 200px; 
height: 200px; 
font-weight: bold; 
border: 1px solid red; 
flex-grow: 2; 
| 
再 次 刷新 网 页 ， 效 果 如 图 11-23 所 示 。 
这 次 ， 第 一 个 元 素 和 第 二 个 元 素 共同 分 割 了 剩余 空间 。 其 实 ， 第 一 个 元 素 和 第 二 个 元 素 是 按 
EE 1:2 的 比例 进行 弹性 父 元 素 剩余 空间 划分 的 。 也 就 是 说 ， 是 按照 每 个 元 素 的 flex-grow 属性 值 对 
剩余 空间 进行 划分 的 。 默 认 值 为 0， 表示 不 参与 父 元 素 剩余 空间 的 划分 。 
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图 11-23 





这 是 弹性 布局 中 重要 的 属性 之 一 。 正 是 因为 这 个 属性 的 存在 ， 它 才 被 称 为 弹性 布局 。 有 了 这 
个 属性 ， 可 以 很 轻松 、 灵 活 地 进行 自 适 应 布局 。 在 一 行 元 素 中 ， 如 果 某 些 元 素 的 宽度 是 固定 的 ， 就 
设 定 其 flex-grow 属性 值 为 0， 如 果 需 要 其 宽度 根据 手机 屏幕 分 辨 率 自 适应 变化 ， 就 根据 需要 设 定 
flex-grow 值 ， 以 此 指定 某 一 块 元 素 分 割 多 少 父 元 素 的 剩余 空间 。 


O) 有 灵活 的 子 元 素 放大 





属性 ， 当 然 也 有 灵活 的 子 元 素 缩小 属性 。flow-shrink 属性 就 可 以 设 


置 元 素 的 缩小 比例 。 假 设 开始 元 素 都 可 以 按照 既定 的 宽度 正常 显示 在 一 个 屏幕 上 ， 当 屏幕 变 小 时 ， 
元 素 收缩 的 比例 就 会 按照 flow-shrink 指定 的 值 进 行 收缩 。 如 果 想 让 一 个 元 素 不 论 屏幕 如 何 收缩 宽 
度 都 不 发 生变 化 ， 就 可 以 将 flow-shrink 属性 值 指定 为 0〈 这 个 值 也 是 flow-shrink 属性 的 默认 值 ) 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 


<style type="text/css"> 

.Container{ 
display:flex; 
display:-webkit-flex; 
border: 2px solid black; 
margin: 20px; 
flex-direction: row; 
flex-wrap: nowrap; 

} 

„iteml{ 
background: green; 
width: 200px; 
height: 200px; 
font-weight: bold; 
border: 1px solid red; 
flex-shrink: 1; 

} 

.item2{ 
background: green; 
width: 300px; 
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height: 200px; 
font-weight: bold; 
border: 1px solid red; 
flex-shrink: 0; 
} 
„item3{ 
background: green; 
width: 100px; 
height: 200px; 
font-weight: bold; 
border: 1px solid red; 
flex-shrink: 1; 
} 
.item4{ 
background: green; 
width: 100px; 
height: 200px; 
font-weight: bold; 
border: 1px solid red; 
flex-shrink: 1; 
} 
„item5{ 
background: green; 
width: 300px; 
height: 200px; 
font-weight: bold; 
border: 1px solid red; 
flex-shrink: 3; 
; 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="item1">1</div> 
<div class="item2">2</div> 
<div class="item3">3</div> 
<div class="item4">4</div> 
<div class="item5">5</div> 
</div> 
</body> 
</html> 


在 上 面 的 例子 中 ， 为 五 个 item 元 素 设 定 的 flex-shrink 


看 最 开始 的 效果 ， 如 图 11-24 所 示 。 





属性 比值 为 1:0:1:1:3。 打 开 浏 览 器 ， 查 
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11-24 


现在 ， 手 动 缩小 浏览 器 界面 的 宽度 ， 观 察 各 个 元 素 宽度 的 变化 。 下 面 选 取 一 个 静态 位 置 的 效 
果 ， 如 图 11-25 所 示 。 








图 11-25 


可 以 看 到 ，2 号 元 素 的 flex-shrink 属性 值 设 为 0， 因 此 不 论 屏 幕 如 何 收缩 ，2 号 元 素 的 宽度 都 

保持 不 变 ，5 号 元 素 的 flex-shrink 属性 值 为 3， 是 其 他 元 素 的 3 倍 ， 因 此 5 号 元 素 收缩 的 幅度 最 大 。 

(3) 还 有 一 个 需要 介绍 的 属性 是 flex-basis 属性 。 这 个 属性 设 定 元 素 在 浏览 器 中 最 开始 占据 的 
空间 ， 一 般 都 会 设置 成 和 元 素 width 和 height 属性 值 相 同 的 像素 大 小 。 

(4) 最 后 一 个 需要 介绍 的 属性 是 align-self 属性 。 之 前 讲 到 ， 可 以 为 父 元 素 定义 多 个 属性 来 设 
署 内 部 元 素 的 对 齐 方式 。align-self 属性 可 以 用 来 设置 某 一 个 元 素 个 性 化 的 对 齐 方式 ， 可 以 覆盖 父 
元 素 对 其 设 定 的 对 齐 方式 。 它 的 取 值 如 下 : 
auto: 默认 对 齐 方式 ， 根 据 父 元 素 的 对 齐 方式 对 齐 。 
flex-start: 在 轴线 开始 处 对 齐 。 
flex-end: 在 轴线 结束 处 对 齐 。 
center: 在 轴线 中 间 对 齐 。 
baseline: 文字 基线 对 齐 。 


弹性 布局 中 还 有 一 类 特殊 的 属性 ， 这 些 属性 是 其 他 多 个 属性 的 组 合 ， 与 font 属性 或 者 border 
属性 类 似 。 
flex 属性 是 flex-grow、flex-shrink 和 flex-basis 的 简写 ， 默 认 值 为 0 1 auto， 后 两 个 属性 是 可 选 


的 。 
有 了 flex 布局 ， 就 可 以 让 开发 者 轻松 构建 出 能 够 自 适应 屏幕 大 小 的 应 用 了 。 


使 用 CSS3 新 特性 


本 章 内 容 要 点 : 
3 transform 属性 及 方法 


随 着 CSS 的 发 展 ， 在 CSS3 中 ， 出 现 了 许多 新 特性 。 这 些 特性 让 开发 者 可 以 更 好 地 解决 样式 
问题 。 不 仅 如 此 ， 这 些 新 特性 还 能 帮助 开发 者 实现 以 前 不 敢 想 象 的 纯 CSS 效果 。 


12.4 transform 属性 


transform 在 英文 中 的 含义 是 “改变 ， 使 … 变 形 ， 转换 ”。CSS3 中 定义 了 transform 属性 ， 在 
transform 属性 中 包含 一 系列 的 CSS 方法 , 这 些 方 法 的 作用 正如 transform 这 个 单词 的 含义 一 样 一 一 
操作 元 素 进行 各 种 各 样 的 变化 。 这些 方 法 包括 对 元 素 进行 平移 (translate)、 对 元 素 进 行 缩 放 (scale)、 
对 元 素 进行 旋转 (rotate) 等 。 

之 前 的 CSS 中 ， 开 发 者 关心 的 更 多 可 能 是 元 素 之 间 的 排版 、 定 位 等 ，transform 的 出 现 让 开发 
者 可 以 很 方便 地 处 理 单个 元 素 各 种 各 样 的 样式 。 

transform 可 以 控制 二 维 或 者 三 维 的 元 素 ， 在 本 书 中 我 们 主要 介绍 transform 是 如 何 进 行 二 维 元 
素 转换 的 。 

下 面 就 对 transform 属性 的 各 个 形变 方法 进行 介绍 。 
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12.2 translate 方法 


translate 方法 是 用 来 操作 元 素 移动 的 ， 因 此 这 个 方法 可 以 为 其 传 入 两 个 参数 x M y (x 表示 平 
移 的 距离 ,表示 垂直 方向 移动 的 距离 ) 。 下 面 给 出 一 个 使 用 translate 的 例子 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
Yu 
margin: 0; 
padding: 0; 
; 
.normal{ 
width: 200px; 
height: 80px; 
background: red; 
} 
„translate í 
margin-top: 10px; 
transform: translate(20px, 20px); 
} 
</style> 
</head> 
<body> 
<div class="normal"></div> 
<div class="normal translate"></div> 
</body> 
</html> 


效果 如 图 12-1 所 示 。 

可 以 看 到 , 正常 情况 下 下 面 的 矩形 应 该 和 上 面 的 矩形 是 对 齐 
的 , 之 间 仅 有 10 像素 的 边 距 ; 但 是 在 为 第 二 个 矩形 设 定 translate ei 
属性 并 为 其 指定 x 方向 和 y 方向 移动 20 像素 后 ， 下 面 的 矩形 发 
生 了 移动 ， 分 别 向 右 和 向 下 移动 了 20 像素 的 距离 。 

如 果 传 入 负数 值 会 出 现 什 么 变化 呢 ? 来 看 下 面 的 例子 。 





12-1 
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【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 


„normal í 
width: 200px; 
height: 80px; 
background: red; 
; 
„translate í 
margin-top: 10px; 
background: green; 
transform: translate(-20px, -20px); 
} 
</style> 
</head> 
<body> 
<div class="normal"></div> 
<div class="normal translate"></div> 
</body> 
</html> 


效果 如 图 12-2 所 示 。 

可 以 看 到 , 当 设 置 为 负数 时 图 像 会 向 着 相反 的 方向 
移动 。 

总 结 一 下 ， 使 用 translate 进行 元 素 的 平移 变换 时 ， 
右 侧 代 表 x 方 向 的 正方 向 ， 下 侧 代表 y 方 向 的 正方 向 ， 
这 与 在 定位 中 的 设 定 相同 。 这 是 因为 浏览 器 的 坐标 就 是 
这 样 规定 的 , 因此 任何 关于 方向 的 设 定 永 远 都 是 右 侧 为 
x 轴 的 正方 向 、 下 侧 为 y 轴 的 正方 向 。 12-2 
回想 一 下 ， 在 元 素 定 位 一 节 中 ， 有 一 种 relative (相对 定位 ) 定位 方式 。 使 用 relative 方法 进行 
元 素 定 位 可 以 让 元 素 基于 原来 的 位 置 进行 变换 。 

对 比 一 下 可 以 发 现 ， 对 一 个 元 素 使 用 translate， 其 实 与 对 该 元 素 使 用 relative 方法 产生 的 效果 
是 一 样 的 。 本 例 中 为 元 素 设 定 了 translate(-20px, -20px)， 表 示 元 素 相对 于 原来 的 位 置 向 左 、 向 上 分 
别 平移 了 20 像素 ， 等 价 于 使 用 relative 方法 的 如 下 代码 : 
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.translatef 
margin-top: 10px; 
background: green; 

position: relative; 
top: -20px; 
left: -20px; 

} 


当 没 有 为 元 素 设 定 任何 效果 时 ， 元 素 自 然而 然 地 会 处 在 一 个 位 置 ， 而 当 为 元 素 设置 translate 属 
性 值 时 ， 元 素 会 相对 于 自身 原来 的 位 置 进行 平移 变换 。 同 样 ， 当 为 元 素 设 置 relative 定位 时 ， 元 素 也 
是 根据 自己 原来 的 位 置 进行 平移 变换 。 二 者 在 视觉 上 面 达到 的 预期 效果 是 相同 的 。 
如 果 为 元 素 设 定 了 relative 属性 , 还 会 对 其 内 部 其 他 元 素 的 定位 产生 影响 。 因为 当 定位 为 absolute 
时 ， 其 定位 的 基准 是 相对 于 离 它 最 近 的 第 一 个 设置 了 position 属性 的 祖先 元 素 进 行 定位 的 。 如 果 为 元 
素 设置 了 translate， 那 么 这 个 元 素 的 子 元 素 会 怎么 表现 自己 呢 ? 比如 ， 要 使 元 素 单纯 地 进行 移动 ， 
而 不 想 改变 内 部 元 素 的 定位 ,仍然 想 让 内 部 元 素 参 照 与 最 外 层 的 元 素 进行 定位 时 , 我 们 能 否 通过 使 
用 translate 来 避免 position 对 子 元 素 的 影响 呢 ? 可 以 看 下 面 的 例子 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
E 
padding: 0; 
} 


.main{ 





position: relative; 
background: rgba(0, 0, 0, .6); 
width: 300px; 
height: 500px; 
margin: 20px; 

} 

.normal{ 
width: 200px; 
height: 80px; 
position: relative; 
left: 100px; 
background: green; 

$ 

„translate í 
width: 200px; 
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height: 80px; 

margin-top: 20px; 
transform: tranlate(100px.0); 
background: green; 


.Son{ 
position: absolute; 
top: Opx; 
left: Opx; 
width: SOpx; 
height: 50px; 
background: red; 
} 
</style> 
</head> 
<body> 
<div class="main"> 
<div class="normal"> 
<div class="son"></div> 
</div> 
<div class="translate"> 
<div class="son"></div> 
</div> 
</div> 
</body> 
</html> 


效果 如 图 12-3 所 示 。 

在 这 个 例子 中 ， 在 屏幕 中 间 绘 制 了 一 个 父 元 素 ， 并 为 这 个 元 素 设 定 
relative 的 position 属性 。 父 元 素 内 部 有 一 个 绿色 的 div， 而 绿色 div Až 
还 有 一 个 红色 的 小 div。 可 以 看 到 ， 无 论 是 使 用 relative 还 是 使 用 
transform， 最 后 的 结果 都 是 一 样 的 : 都 会 被 其 内 部 的 子 元 素 当 作 最 近 的 
设置 了 position 的 元 素 。 

综 上 ， 我 们 可 以 发 现 ，translate 和 relative 无 论 是 在 表现 形式 还 是 对 
其 他 元 素 的 影响 方面 都 是 一 样 的 。 比 较 relative 来 学 习 translate， 就 可 以 
更 容易 地 进行 理解 了 。 

如 果 将 translate 设置 成 百分比 会 是 什么 样 的 效果 呢 ? 





【示例 】 12-3 
<!DOCTYPE> 
<html> 
<head> 


<meta charSet="utf-8" > 


第 12 章 使 用 CSS3 新 特性 | 193 





<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 


-main{ 
position: relative; 
background: rgba(0, 0, 0, .6); 
width: 300px; 
height: 500px; 
margin: 20px; 
; 
.translate{ 
width: 200px; 
height: 80px; 
transform: translate(20%, 20%); 
background: green; 
} 
</style> 
</head> 
<body> 
<div class="translate"></div> 
</body> 
</html> 


效果 如 图 12-4 所 示 。 

通过 计算 可 以 得 出 , 元素 向 下 移动 了 16 像素 、 向 右 移 动 了 Wl 
40 像素 。 这 个 值 是 如 何 计算 出 来 的 呢 ? 注意 ， 原 来 元 素 的 宽度 
是 200 像素 、 高 度 是 80 像素 。 也 就 是 说 ， 百 分 比 的 作用 是 作用 
在 宽 高 上 的 ， 向 x 轴 平 移 的 值 如 果 设 定 成 百分比 ， 那 么 x 轴 方 
向 平移 的 值 就 是 参照 元 素 的 宽 得 到 的 百分比 值 ， 向 y 轴 平 移 的 
值 如 果 设 定 成 百分比 ， 那 么 y 轴 方 向 平移 的 值 就 是 参照 元 素 的 
高 得 到 的 百分比 值 。 

利用 这 种 特性 还 可 以 解决 一 些 样式 的 问题 ， 最 典型 的 就 是 图 12-4 
下 面 介 绍 的 垂直 居中 应 用 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
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margin: 0; 
padding: 0; 
} 
„translate í 
width: 220px; 
height: 500px; 
margin: 80px; 
background: rgba(0, 0, 0, .6); 
position: relative; 
j 
.soní 
background: red; 
position: absolute; 
width: 100px; 
height: 100px; 
top: 50%; 
transform: translate(0, -50%); 
; 
</style> 
</head> 
<body> 
<div class="translate"> 
<divc class="son"></div> 
</div> 
</body> 
</html> 


效果 如 图 12-5 所 示 。 

我 们 是 如 何 做 到 这 一 点 的 呢 ? 这 就 要 对 百分比 进行 深入 理解 了 。 首 
先 代码 为 子 元 素 设 定 position 为 absolute， 相 对 于 父 元 素 进行 定位 。 然 后 
使 用 top:50% 将 这 个 元 素 用 百分比 设 定 一 下 高 度 。 这 个 高 度 其 实 是 根据 
父 元 素 当前 的 高 度 设 定 的， 但 是 ， 这 样 设 定之 后 ， 红 色 div 的 顶部 边线 
是 居中 的 ， 整 个 元 素 看 起 来 却 不 是 居中 的 。 这 时 把 这 个 元 素 向 上 平移 该 
元 素 高 度 的 一 半 ， 就 可 以 达到 居中 的 效果 了 。 根 据 上 面 说 的 ， 当 为 
translate 设置 百分比 的 值 时 ， 它 是 根据 元 素 自 身 宽 高 计算 的 ， 所 以 这 时 
再 设置 translate(0, -50%0) 就 可 以 轻而易举 地 实现 垂直 居中 的 效果 了 。 








图 12-5 
12.3 rotate 方法 


rotate 表示 是 旋转 变换 ， 和 之 前 说 的 translate 使 用 方法 相同 。 旋 转 就 是 将 原来 的 元 素 沿 着 一 个 
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方向 绕 





= 











用 方法 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 


<style type="text/css"> 

EK 
margin: 0; 
padding: 0; 

h 

„translate í 
width: 220px; 
height: 500px; 
margin: 80px; 
background: rgba(0, 0, 0, .6); 
position: relative; 


} 
„son { 
background: red; 
position: absolute; 
width: 100px; 
height: 100px; 
transform: rotate(20deg); 
J] 
</style> 
</head> 
<body> 


<div class="translate"> 
<divc class="son"></div> 
</div> 
</body> 
</html> 


效果 如 图 12-6 所 示 。 
可 以 看 到 , rotate 对 于 元 素 的 操作 结果 是 元 素 沿 着 圆心 进行 了 旋 
上 面 传递 的 参数 是 20deg，deg 在 CSS 中 表示 角度 单位 ，20deg 





表示 着 将 元 素 旋转 20 度 ， 得 到 上 面 图 中 的 效果 。 


当然 , rotate 的 参数 还 能 传递 负数 , 会 使 得 旋转 的 方向 出 现 差异 。 


> rotate 传递 的 参数 是 正 数 时 , 图 形 沿 着 顺 时 针 方 向 旋转 ; 当 传 递 的 
参数 是 负数 时 ， 图 形 沿 着 逆 时 针 方向 旋转 。 


图 12-6 





心 移动 一 个 角度 。 显 然 ，rotate() 方 法 需要 传递 的 参数 就 是 一 个 角度 。 下 面 是 一 个 基本 的 使 
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12.4 ”scale() 方 法 


scale() 方 法 进行 的 是 缩放 变化 ， 它 可 以 让 一 个 元 素 按照 一 定 的 比例 进行 缩小 或 者 放大 。 

在 浏览 器 中 ,每 一 个 元 素 都 有 高 度 和 宽度 ,高 度 是 沿 着 y 轴 方 向 的 大 小 、 宽 度 是 沿 着 x 轴 方 向 
的 大 小 。 宽 度 和 高 度 共同 决定 了 一 个 元 素 的 最 终 大 小 。 因 此 ， 当 想 对 一 个 元 素 进行 缩放 时 ， 就 会 出 
现 两 个 方向 上 的 缩放 ,分 别 为 x 轴 方 向 和 y 轴 方向 。 最终 元 素 的 大 小 取决 于 在 x 轴 方向 和 y 轴 方 向 
各 缩放 了 多 少 。 既 可 以 在 x 轴 和 y 轴 上 都 放大 或 者 缩小 ， 也 可 以 在 x 轴 上 放大 、 在 y 轴 上 缩小 。 

因此 ，scale0 方 法 需要 传 入 两 个 参数 ， 即 x 轴 方 向 的 缩放 比例 和 y 轴 方向 的 缩放 比例 。 下 面 给 
出 一 个 基本 的 使 用 例子 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 


„translate { 
width: 220px; 
height: 500px; 
margin: 80px; 
background: rgba(0, 0, 0, .6); 
} 
-Son{ 
background: red; 
width: 100px; 
height: 100px; 
margin-top: 40px; 
margin-left: 20px; 
} 
„sonl í 
transform: scale(1.2,1.2); 
$ 
.Son2{ 
transform: scale(1.5,1.2); 
; 


.son3í 
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transform: scale(1.2.0.8); 
} 
</style> 
</head> 
<body> 
<div class="translate"> 
<div class="son"></div> 
<div class="son sonl"></div> 
<div class="son son2"></div> 
<div class="son son3"></div> 
</div> 
</body> 
</html> 
效果 如 图 12-7 所 示 。 
第 一 个 正方 形 是 最 开始 定义 的 图 形 , 它 的 宽度 和 高 度 是 一 定 的 。 接 下 
来 ， 我 们 在 这 个 图 形 的 基础 上 进行 缩放 ， 分 别 进行 等 比 放 大 、 不 等 比 放大 
和 同时 缩小 和 放大 。 可 以 看 出 ,等 比 放大 的 时 候 图 形 还 是 正方 形 ， 宽 高 相 
同 。 不 等 比 缩放 的 时 候 ， 宽 高 之 间 产 生 差 异 ， 这 就 是 分 别 在 x 轴 和 yy 轴 上 
进行 不 同 缩放 的 结果 。 
缩放 效果 可 以 解决 开发 者 在 移动 端 样 式 开发 中 的 许多 问题 比如， 有 
时 需要 让 字体 很 小 ， 但 是 超出 了 在 CSS 样式 中 浏览 器 可 以 识别 的 最 小 字 
体 ， 这 时 可 以 使 用 scale 方法 对 文字 进行 强行 管辖 ， 解 决 font-size 方法 在 
浏览 器 中 的 限制 。 又 如 ， 可 能 需要 将 同一 个 元 素 按照 不 同 的 大 小 等 比例 显 
示 在 不 同 的 位 置 上 , 为 每 个 这 样 的 元 素 都 设 定 宽 和 高 显然 是 一 种 效率 很 低 
又 不 能 保证 精确 的 做 法 〈 因 为 宽 高 比 要 求 相 等 ， 有 时 在 计算 时 会 出 现 小 数 图 12-7 
的 情况 ) ， 这 时 直接 使 用 scale 方法 ， 一 个 步骤 即 可 直接 轻松 地 缩放 ， 完 成 开发 者 的 需求 。 











12.5 ”skew() 方 法 


skew0) 方 法 表示 的 是 倾斜 变换 ， 倾 斜 变换 就 是 将 一 个 元 素 的 某 个 方向 按照 一 定 的 角度 进行 
倾斜 。 

skew() 方 法 需要 传 入 两 个 参数 ， 和 rotate 一 样 ， 也 分 为 在 x 轴 上 和 在 了 轴 上 不 同 的 倾斜 角度 ， 
传 入 参数 的 单位 也 是 角度 deg。 

这 个 变换 比较 难 理解 ， 先 看 一 个 例子 。 

【示例 】 

<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" > 
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<meta name="viewport" content= "width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
ii 
margin: 0; 
padding: 0; 
} 
„translate í 
width: 220px; 
height: 500px; 
margin: 80px; 
background: rgba(0, 0, 0, .6); 
} 
.Son{ 
background: red; 
width: 100px; 
height: 100px; 
margin-top: 40px; 
margin-left: 20px; 
} 
„sonl í 
transform: skew(30deg, 0); 
; 
.son2 í 
transform: skew(0, 30deg); 
} 
.son3 í 
transform: skew(30deg, 30deg); 
} 
</style> 
</head> 
<body> 
<div class="translate"> 
<div class="son"></div> 
<div class="son sonl"></div> 
<div class="son son2"></div> 
<div class="son son3"></div> 
</div> 
</body> 
</html> 


效果 如 图 12-8 所 示 。 

原本 的 图 形 是 一 个 正方 形 ， 首 先 使 用 skew 变换 : skew(30deg, 0)， 表 示 将 图 形 在 x 轴 的 方向 倾 
斜 30 度 。 接 下 来 看 一 下 第 二 个 图 形 的 变化 ， 它 变 成 了 一 个 平行 四 边 形 ， 这 个 平行 四 边 形 的 水 平 轴 
线 没 有 任何 变化 ， 而 竖 直 的 轴线 相 比 原 来 逆 时 针 倾斜 了 30 度 ， 这 就 是 skew 的 作用 。 
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如 果 x 参数 为 0、y 参数 为 30 呢 ? 第 三 个 图 形 进 行 的 操作 是 
skew(0,30deg); 结果 是 这 个 平行 四 边 形 的 y 轴 保持 不 变 、x 轴 沿 着 顺 时 针 旋 
转 了 30 度 ， 得 到 了 第 三 个 图 形 。 

最 后 ， 将 x 轴 和 ?了 轴 这 两 个 方向 的 倾斜 角度 同时 改变 ， 就 得 到 了 最 后 
一 个 平行 四 边 形 ， 这 个 平行 四 边 形 的 x 轴 和 > 轴 都 进行 了 一 定 程度 的 倾斜 。 

使 用 skew 时 , 被 倾斜 元 素 内 部 的 内 容 也 会 随 着 倾斜 。 我 们 看 一 下 下 面 
的 效果 。 











【示例 】 ais 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
gd 
margin: 0; 
padding: 0; 
} 
.translate{ 
width: 220px; 
height: 500px; 
margin: 80px; 
background: rgba(0, 0, 0, .6); 
k: 
.Son{ 
background: red; 
width: 100px; 
height: 100px; 
margin-top: 40px; 
margin-left: 20px; 
transform: skew(30deg, 0); 
text-align: center; 
color: white; 
line-height: 100px; 
} 
</style> 
</head> 
<body> 
<div class="translate"> 
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<div class="son"> 倾 斜 测试 <div> 
</div> 
</body> 
</html> 


效果 如 图 12-9 所 示 。 
可 以 看 到 ， 被 设置 了 倾斜 的 元 素 ， 其 内 部 的 文字 也 跟着 倾斜 了 ， 这 是 skew 变换 的 副作用 。 我 
们 其 实 是 不 希望 内 部 文字 也 进行 倾斜 的 ， 可 以 使 用 下 面 这 种 方式 解决 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
ži 
margin: 0; 
padding: 0; 
; 
.translate{ 
width: 220px; 
height: S00px; 
margin: 80px; 
background: rgba(0, 0, 0, .6); 
|; 
.Son{ 
background: red; 
width: 100px; 
height: 100px; 
margin-top: 40px; 
margin-left: 20px; 
transform: skew(30deg, 0); 
text-align: center; 
color: white; 
line-height: 100px; 
b 
.SOn pí 
transform: skew(-30deg, 0); 
} 
</style> 
</head> 
<body> 
<div class="translate"> 


<div class="son"><p> 倾 斜 测试 </p></div> 
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</div> 
</body> 
</html> 


效果 如 图 12-10 所 示 。 








12-9 12-10 


上 面 的 例子 为 内 部 的 文字 添加 了 一 个 p 标签 ， 然 后 为 这 个 p 标签 添加 其 他 样式 : 让 这 个 p 标 
签 也 进行 倾斜 操作 , 倾斜 的 方向 与 其 父 元 素 的 倾斜 方向 正好 相反 。 这 样 就 抵消 了 父 元 素 的 倾斜 对 于 
子 元 素 的 影响 。 

在 一 般 的 开发 中 ， 当 需要 给 一 个 包含 其 他 内 容 的 父 元 素 设置 倾斜 变换 时 ， 通 常会 在 这 个 元 素 
和 其 子 元 素 中 再 增添 一 个 div, 为 其 设置 倾斜 , 来 抵消 父 元 素 的 倾斜 操作 对 子 元 素 倾斜 操作 的 影响 。 
可 以 看 一 下 下 面 的 例子 。 

【示例 】 

<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 





<style type="text/css"> 


width: 220px; 

height: 500px; 

margin: 80px; 

background: rgba(0, 0, 0, .6); 
h 
.SOn{ 

background: red; 

width: 100px; 
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height: 100px; 
margin-top: 40px; 
margin-left: 20px; 
transform: skew(30deg, 0); 
text-align: center; 
color: white; 
line-height: 100px; 
} 
-wrap{ 
transform: skew(-30deg, 0); 
} 
.test{ 
width: 20px; 
height: 20px; 
background: white; 
display: block; 
} 
</style> 
</head> 
<body> 
<div class="translate"> 
<div class="son"> 
<div class="wrap"> 
<span> 解 决 倾斜 影响 </span> 
<span class="test"></span> 
</div> 
</div> 
<div class="son"> 
<span> 解 决 倾斜 影响 </span> 
<span class="test"></span> 
</div> 
</div> 
</body> 
</html> 


效果 如 图 12-11 所 示 。 

这 里 像 上 面 所 说 的 那样 将 父 元 素 的 内 部 套 了 一 个 类 名 为 wrap 的 
div， 用 来 抵消 外 面 元 素 对 于 内 部 元 素 的 倾斜 影响 。 可 以 看 到 ， 加 了 这 
层 元 素 和 没 加 这 层 元 素 相 比 , 完美 地 解决 了 skew 变换 给 子 元 素 带 来 的 
副作用 。 





解决 倾斜 影响 


NW 


`a 





12-11 
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12.6 transition 方法 


以 前 在 开发 的 时 候 ， 如 果 希 望 网 站 中 的 内 容 能 够 “ 动 ” 起 来 ， 能 够 给 用 户 更 好 的 交互 体验 ， 
就 需要 写 一 些 复杂 的 JavaScript 脚本 来 实现 有 了 CSS3 后 ,许多 动画 效果 其 实 都 可 以 通过 transition 
方法 实现 。 

CSS3 的 transition 允许 CSS3 的 属性 值 在 一 定 的 时 间 区 间 内 平滑 过 渡 。 这 种 效果 可 以 在 鼠标 单 击 、 
获得 焦点 、 被 单 击 或 对 元 素 任何 改变 中 触发 ， 并 圆滑 地 以 动画 效果 改变 CSS 的 属性 值 。 

也 就 是 说 ， 可 以 使 用 transition 配合 上 在 CSS 中 可 以 使 用 的 事件 ， 如 鼠标 划 过 事件 Chover) ~ 
获取 焦点 事件 Cfocus) 等 ， 实 现 更 好 的 用 户 交互 。 

transition 其 实 是 一 个 复合 属性 ， 包 含 4 个 可 以 被 设置 的 子 属性 ， 分 别 是 : 
transition-property 规定 设置 过 渡 效 果 的 CSS 属性 名 称 。 
transition-duration ”规定 完成 过 渡 效 果 需 要 多 少 秒 或 毫秒 。 
transition-timing-function 规定 速度 效果 的 速度 曲线 。 
transition-delay 定义 过 渡 效 果 何 时 开始 。 








1. transition-property 


transition-property 属性 用 来 设置 开发 者 希望 产生 渐变 效果 的 属性 的 名 称 ， 比 如 元 素 的 宽度 
width 、 高 度 height 等 。 下 面 先 来 看 一 个 例子 ， 在 了 解 基本 的 transition 用 法 的 同时 看 看 
transition-property 如 何 使 用 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 


.transition{ 
width: 300px; 
height: 100px; 
background: green; 

} 

.transition:hover{ 
width: 200px; 
transition-property: width; 
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transition-duration: 0.5s; 

} 
</style> 
</head> 
<body> 

<div class="transition"></div> 
</body> 
</html> 


此 处 为 transition 元 素 设 定 了 宽度 为 300px， 但 是 当 鼠 标 划 过 时 ， 这 个 元 素 的 宽度 设置 成 了 
200px。 在 没有 transition 属性 定义 的 时 候 ， 当 鼠标 划 过 该 元 素 时 ， 该 元 素 的 宽度 瞬间 变 成 200px。 
当 为 这 个 元 素 设置 了 transition 属性 后 ， 鼠 标 划 过 后 元 素 的 行为 发 生 了 变化 ， 元 素 的 宽度 慢 慢 地 变 
成 了 200px， 产 生 了 想 要 的 动画 效果 。 

首先 设 定 transition-property 属性 , 这 指明 要 发 生动 画 变 化 的 是 元 素 的 width 属性 。 如果 在 hover 
事件 中 指定 了 高 度 也 和 原来 不 一 样 , 但 是 没有 在 transition-property 中 添加 这 个 属性 , 那么 它 的 高 度 
也 不 会 发 生动 画 效果 。 

接 下 来 设置 transition-duration 属性 ， 表 明 动 画 将 会 持续 多 长 时 间 ， 最 后 的 效果 是 元 素 的 宽度 
在 0.5s 内 从 300 像素 缩短 到 了 200 像素 。 

除了 可 以 指定 各 个 属性 外 ， 还 可 以 将 transition-property 设置 成 all， 表 明 当 CSS 定义 的 事件 发 
生 时 元 素 发 生 的 所 有 变化 都 将 执行 后 面 定义 的 动画 效果 。 





2.transition-duration 


transition-duration 属性 已 经 提 及 ， 主 要 用 来 设 定 动画 效果 持续 的 时 间 。 这 个 值 设置 得 越 大 ， 整 
个 动画 变化 过 程 越 慢 ， 这 个 值 设置 得 越 小 ， 整 个 动画 变化 过 程 越 快 。 下 面 是 一 个 可 以 进行 对 比 的 
例子 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" > 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 


„transition 1 í 
width: 300px; 
height: 100px; 
background: green; 

h 

.transition2{ 
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width: 300px; 
height: 100px; 
background: red; 
margin-top: 20px; 
} 
.transition1:hover{ 
width: 200px; 
transition-property: width; 
transition-duration: 0.5s; 
} 
.transition2:hover{ 
width: 200px; 
transition-property: width; 
transition-duration: 2s; 
; 
</style> 
</head> 
<body> 
<div class="transition1"></div> 
<div class="transition2"></div> 
</body> 
</html> 


从 结果 可 以 发 现 ，transition-duration 的 值 越 大 ， 整 个 动画 显示 得 越 慢 ， 因 为 CSS 需要 将 所 有 


的 变化 平均 到 这 些 时 间 之 内 执行 。 


3.transition-time-function 


我 们 知道 ， 元 素 的 样式 变化 会 在 transition-duration 这 个 值 设 定 的 时 间 之 内 发 生变 化 ， 从 而 形 


成 动画 ，transition-time-function 属性 就 用 于 决定 在 这 段 时 间 之 内 变化 的 部 分 如 何 进行 展开 。 





transition-time-function 有 如 下 内 置 的 属性 值 : 

linear 规定 以 相同 速度 开始 至 结束 的 过 渡 效 果 。 

ease 规定 慢 速 开始 ， 然 后 变 快 ， 再 慢 速 结束 的 过 渡 效 果 。 
ease-in 规定 以 慢 速 开始 的 过 渡 效 果 。 

ease-out 规定 以 慢 速 结束 的 过 渡 效 果 。 

ease-in-out 规定 以 慢 速 开始 和 结束 的 过 渡 效 果 。 


在 之 前 的 例子 中 ， 开 发 者 没有 对 transition-time-function 属性 进行 设 定 ，CSS 会 使 用 默认 值 


linear。 下 面 给 出 一 个 使 用 transition-time-function 的 例子 。 
【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 
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<meta name="viewport" content="width=device-width. initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 

a 
margin: 0; 
padding: 0; 

} 

.transition1{ 
width: 300px; 
height: 100px; 
background: green; 

} 

„transition? í 
width: 300px; 
height: 100px; 
background: red; 
margin-top: 20px; 

} 

.transition3{ 
width: 300px; 
height: 100px; 
background: pink; 
margin-top: 20px; 

1 

.transition4{ 
width: 300px; 
height: 100px; 
background: black; 
margin-top: 20px; 

} 

.transitionS{ 
width: 300px; 
height: 100px; 
background: yellow; 
margin-top: 20px; 

} 

„transition 1:hover í 
width: 200px; 
transition-property: width; 
transition-duration: 0.5s; 
transition-time-function: linear; 

} 

.transition2:hover{ 
width: 200px; 
transition-property: width; 
transition-duration: 0.5s; 
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transition-time-function: ease; 
} 
.transition3:hover{ 
width: 200px; 
transition-property: width; 
transition-duration: 0.5s; 
transition-time-function: ease-in; 
} 
.transition4:hover{ 
width: 200px; 
transition-property: width; 
transition-duration: 0.5s; 


transition-time-function: ease-out; 


} 

„transition§:hover { 
width: 200px; 
transition-property: width; 
transition-duration: 0.5s; 


transition-time-function: ease-in-out; 


; 

</style> 

</head> 

<body> 
<div class="transition1"></div> 
<div class="transition2"></div> 
<div class="transition3"></div> 
<div class="transition4"></div> 
<div class="transition5"></div> 

</body> 

</html> 


这 样 就 可 以 使 用 不 同 的 方法 指定 开发 者 在 动画 期 间 的 动画 效果 了 。 


但 是 , 只 有 这 么 几 种 给 定 的 内 置 
还 可 以 指定 名 叫 贝 塞 尔 曲线 的 值 。 





属性 值 并 不 能 满足 开发 者 的 需求 ，transition-time-function 属性 


贝 塞 尔 曲线 是 应 用 于 二 维 图 形 应 用 程序 的 数学 曲线 ， 一 般 的 矢量 图 形 软件 通过 它 来 精确 地 画 
出 曲线 。 贝 塞 尔 曲线 由 线段 与 节点 组 成 ， 节 点 是 可 拖 动 的 支点 。 


贝 塞 尔 曲线 需要 传 入 4 个 参数 。 
应 的 贝 塞 尔 曲线 值 的， 具体 如 下 : 


linear cubic-bezier(0.0.1.1). 


ease-out 


ease-in-out 


上 面 所 说 的 几 种 内 置 的 transition-time-function 其 实 都 是 有 对 


ease cubic-bezier(0.25.0.1.0.25.1). 
ease-in cubic-bezier(0.42.0.1.1). 
cubic-bezier(0.0.0.58.1). 
cubic-bezier(0.42.0.0.58.1). 
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4. transition-delay 


transition-delay 属性 用 来 定义 一 个 延迟 ， 规 定 在 过 渡 效 果 开 始 之 前 需要 等 待 的 时 间 ， 以 秒 或 毫 
秒 计 。 也 就 是 说 ， 定 义 了 该 值 后 ， 可 以 让 动画 等 待 一 段 时 间 后 再 开始 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
margin: 0; 
padding: 0; 
J. 
.transition1{ 
width: 300px; 
height: 100px; 
background: green; 
} 
-transition2 í 
width: 300px; 
height: 100px; 
background: red; 
margin-top: 20px; 
} 
.transition1:hover{ 
width: 200px; 
transition-property: width; 
transition-duration: 0.5s; 
transition-delay: 2000; 
} 
.transition2:hover{ 
width: 200px; 
transition-property: width; 
transition-duration: 2s; 
transition-delay: 1000; 
} 
</style> 
</head> 
<body> 
<div class="transition1"></div> 
<div class="transition2"></div> 
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</body> 
</html> 


可 以 看 到 , 图 形 的 运动 会 在 设置 的 transition-delay 之 后 才 开 始 。 需要 注意 的 是 , transition-delay 
是 以 毫秒 为 单位 的 。 


5. transition 示例 


transition 属性 是 一 个 复合 属性 ， 包 含 上 面 所 说 的 transition-duration 、transition-property 、 
transition-time-function 和 transition-delay。 下 面 是 使 用 transition 的 例子 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 

sil 
margin: 0; 
padding: 0; 

J 

„transition 1 { 
width: 300px; 
height: 100px; 
background: green; 

} 

.transition2{ 
width: 300px; 
height: 100px; 
background: red; 
margin-top: 20px; 

} 

.transition1:hover{ 
width: 200px; 
transition: all .5s; 

} 

.transition2:hover{ 
width: 200px; 
transition: width .5s; 

} 

</style> 
</head> 
<body> 


<div class="transition 1"></div> 
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<div class= "transition2"></div> 


</body> 

</html> 

熟练 运用 transition 属性 , 可 以 更 方便 地 制作 动画 效果 , 用 CSS 来 取代 复杂 无 逻辑 的 JavaScript 
动画 代码 。 





比如 ， 可 以 使 用 transform 和 transition 这 两 个 CSS3 属性 相 结 合 的 方法 制作 出 许多 非常 简便 、 
十 分 炫 酷 的 动画 效果 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet= "utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 

et 
margin: 0; 
padding: 0; 

H 

„transition { 
width: 300px; 
height: 100px; 
background: green; 
margin-bottom: 20px; 
transition: all .5s; 

} 

„transition l:hover { 
transform: scale( 1.5); 
transition: all .5s; 

} 

.transition2:hover{ 
transform: rotate(40deg); 
transition: all .5s; 

} 

.transition3:hover{ 
transform: translate(30px,40px); 
transition: all .5s; 

} 

.transition4:hover{ 
transform: skew(20deg, 30deg); 
transition: all .5s; 

} 

</style> 
</head> 
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<body> 
<div class="transition transition1"></div> 
<div class="transition transition2"></div> 
<div class="transition transition3"></div> 
<div class="transition transition4"></div> 

</body> 

</html> 


鼠标 划 过 时 会 看 到 意 想不到 的 动画 效果 。 当 然 ， 也 可 以 将 多 种 transform 进行 组 合 。 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
sa: 
margin: 0; 
padding: 0; 
} 
„transition { 
width: 300px; 
height: 100px; 
background: green; 
margin-bottom: 20px; 
transition: all .5s; 
; 
.transition1:hover{ 
transform: scale(1.5) 


rotate(40deg) 
skew(20deg, 30deg) 
translate(30px,40px); 
transition: all .5s; 
} 
</style> 
</head> 
<body> 
<div class="transition transition1"></div> 
</body> 
</html> 


还 可 以 将 transition 的 技巧 运用 于 常见 的 开发 中 。 下 面 的 例子 仅 使 用 transition 很 简单 的 代码 就 
实现 了 用 户 单 击 后 输入 框 的 变化 , 加 强 了 用 户 和 界面 之 间 的 交互 效果 。 虽然 仅仅 是 添加 了 很 少量 的 
代码 ， 但 是 效果 非常 好 。 
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【示例 】 
<!DOCTYPE> 
<html> 
<head> 


<meta charSet="utf-8" > 
<meta name="viewport" content= "width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 


se 
margin: 0; 
padding: 0; 
$ 
„input í 


width: 300px; 
height: 30px; 
padding-left: 10px; 


; 


.input:focus{ 


padding-left: 30px; 
transition:padding-left .5s; 


} 
</style> 
</head> 
<body> 


<input class="input" type="text" placeholder=" 请 输入 内 容 " /> 


</body> 
</html> 


transition 可 以 


满足 所 有 的 需求 。 


12.7 帧 动画 


满足 使 用 CSS 制作 动画 的 需求 。 但 是 ，transition 制作 动画 的 局 限 性 许多 ， 不 能 


在 使 用 transition 制作 动画 的 时 候 ， 只 能 定义 变化 时 间 和 变化 的 起 止 情况 ， 很 难 定义 变化 过 程 
中 每 个 过 程 的 变化 情况 。 好 在 CSS3 为 制作 复杂 的 动画 效果 提供 了 接口 , 即 @keyframes 和 animation。 

1. @keyframes 

@keyframes 正如 它 的 名 字 所 定义 的 那样 ， 表 示 的 是 定义 关键 帧 。 关 键 帧 是 计算 机 动画 中 的 术 
语 。 帧 就 是 动画 中 最 小 单位 的 单 幅 影像 画面 ， 相 当 于 电影 胶片 上 的 每 一 格 镜头 。 在 动画 软件 的 时 间 
轴 上 帧 表现 为 一 格 或 一 个 标记 。 关 键 帧 相当 于 二 维 动画 中 的 原画 , 指 角色 或 者 物体 运动 或 变化 中 的 
关键 动作 所 处 的 那 一 帧 。 

在 CSS 中 制作 动画 当然 和 计算 机 动画 中 的 这 个 很 关键 的 事物 分 不 开 。 下 面 看 一 下 如 何 使 用 
@keyframes 来 定义 关键 帧 。 

在 @keyframes 中 ， 将 一 个 完整 的 动画 过 程 使 用 百分比 拆 分 开 ， 从 0% 到 100%。 在 这 个 过 程 中 
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的 任意 一 个 动画 位 置 都 是 可 以 指定 关键 帧 的 。 也 就 是 说 ， 可 以 指定 其 间 任 何 一 个 时 态 元 素 的 状态 ， 
从 而 确定 每 一 帧 ， 形 成 动画 。 下 面 是 一 个 基本 的 定义 。 


【示例 】 


.mainí 
width:100px; 
height:100px; 
background:red; 
position:relative; 
} 
(@keyframes mymove 
{ 
0% {top:O0px;} 
25% {top:200px;} 
50% {top:100px;} 
75% {top:200px;} 
100% {top:0px;} 


; 
(@-moz-keyframes mymove /* Firefox */ 
{ 

0% {top:0px;} 


25% {top:200px;} 
50% {top:100px;} 
75% {top:200px;} 
100% {top:0px;} 

} 


(@-webkit-keyframes mymove /* Safari 和 Chrome */ 
{ 

0% {top:O0px;} 

25% {top:200px;} 

50% {top:100px;} 

75% {top:200px;} 

100% {top:0px;} 
} 


(@-o-keyframes mymove /* Opera */ 
Í 

0% (top:Opx;; 

25% {top:200px;} 

50% {top:100px;} 

75% {top:200px;} 

100% {top:0px;} 
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在 上 面 的 定义 中 ， 为 了 兼容 各 个 浏览 器 ， 上 面 的 代码 定义 添加 了 前 组， 针对 不 同 内 核 的 浏览 
器 做 了 不 同类 型 的 兼容 。 这 个 动画 有 几 个 关键 因素 ， 首 先 要 以 @keyframes 开头 ， 表 明 接 下 来 要 定 
义 的 是 关键 帧 动画 。 接 下 来 ， 指 定 了 5 个 时 态 的 物体 状态 : 0%、25%、50%、75%、100%。 在 这 5 
个 时 间 状 态 中 ， 指 定 了 各 个 时 间 状 态 的 top 值 。 也 就 是 说 ， 在 元 素 基本 样式 的 基础 上 ， 为 这 5 个 时 
间 状 态 下 的 元 素 设置 了 不 同 的 top 值 ， 从 而 让 这 5 个 时 间 状 态 的 样式 不 同 。 
在 实际 效果 中 ，5 个 时 间 态 对 应 的 元 素 样式 如 下 : 
0% 时 : 
.mainí 
width:100px; 
height: 100px; 
background:red; 
position:relative; 
top: Opx; 
25% 时 : 
.main{ 
width:100px; 
height: 100px; 
background:red; 
position:relative; 
top: 200px; 
J 
50% 时 : 
.main{ 
width: 100px; 
height: 100px; 
background:red; 
position:relative; 
top: 100px; 
} 
75% 时 : 
.main{ 
width:100px; 
height: 100px; 
background:red; 
position:relative; 
top: 200px; 
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100% 时 : 


.main{ 
width: 100px; 
height: 100px; 
background:red; 
position:relative; 
top: Opx; 
; 


在 @keyframes 中 ， 还 可 以 使 用 from 和 to 关键 字 。from 代表 的 是 0% 时 的 状态 ，to 代表 的 是 


100% 时 的 状态 。 
【示例 】 


(@keyframes mymove 

ü 

from {top:0px;} 

to {top:200px;} 

} 

@-moz-keyframes mymove /* Firefox */ 
{ 

from {top:0px;} 

to {top:200px;} 

} 

@-webkit-keyframes mymove /* Safari 和 Chrome */ 
{ 

from {top:0px;} 

to {top:200px;} 

} 

(@-o-keyframes mymove /* Opera */ 

{ 

from {top:0px;} 

to {top:200px;} 

} 


这 种 定义 方式 主要 用 在 只 有 起 始 和 截至 两 个 状态 下 的 元 素 的 简单 动画 ， 其 实 这 种 方法 定义 的 





动画 效果 和 transition 定义 的 动画 效果 是 类 似 的， 都 


2. animation 





属于 简单 动画 。 


了 解 了 如 何 使 用 @keyframes 定义 关键 帧 后 就 可 以 进行 下 一 步 了 一 一 如 何 将 这 些 定 义 的 关键 帧 
指定 到 元 素 上 ， 这 就 需要 借助 CSS3 中 的 animation 属性 了 。animation 属性 也 是 一 个 复合 属性 ， 包 


含 以 下 6 个 属性 : 


e animation-name 规定 需要 绑 定 到 选择 器 的 


keyframe 名 称 。 
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animation-duration ”规定 完成 动画 所 花费 的 时 间 ， 以 秒 或 毫秒 计 。 
animation-time-function 规定 动画 的 速度 曲线 。 
animation-iteration-count 规定 动画 应 该 播放 的 次 数 。 
animation-delay 规定 在 动画 开始 之 前 的 延迟 。 

animation-direction 规定 是 否 应 该 轮流 反 向 播放 动画 。 





下 面 主要 介绍 一 下 animation 的 前 5 个 属性 。 





(1) animation-name 属性 
animation-name 属性 用 来 为 一 个 元 素 指定 一 个 keyframes 定义 的 关键 帧 动画 。 比 如 ， 在 刚才 定 
义 的 mymove 关键 帧 动画 中 , 如 果 想 将 这 个 关键 帧 动画 运用 在 main 元 素 上 , 就 可 以 为 main 元 素 指 


定 animation-name 属性 。 
【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 


>£ 
margin: 0; 
padding: 0; 
; 
.main{ 
width:100px; 
height: 100px; 
background:red; 
position:relative; 
animation-name:mymove 
-moz-animation-name:mymove; /* Firefox */ 
-webkit-animation-name:mymove; /* Safari and Chrome */ 
-o-animation-name:mymove; /* Opera */ 


; 


(@keyframes mymove 


t 
0% {top:0px;} 
25% {top:200px;} 
50% {top:100px;} 
75% {top:200px;} 
100% {top:0px;} 


} 
@-moz-keyframes mymove /* Firefox */ 


£ 
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0% (top:Opx;; 
25% {top:200px;} 
50% {top:100px;} 
75% {top:200px;} 
100% {top:0px;} 

} 


@-webkit-keyframes mymove /* Safari 和 Chrome */ 


{ 
0% {top:0px;} 
25% {top:200px;} 
50% {top:100px;} 
75% {top:200px;} 
100% {top:0px;} 

} 


(@-o-keyframes mymove /* Opera */ 
{ 
0% {top:Opx;} 
25% {top:200px;} 
50% {top:100px;} 
75% {top:200px;} 
100% {top:0px;} 
; 
</style> 
</head> 
<body> 
<div class="main"></div> 
</body> 
</html> 


在 上 面 的 例子 中 ， 我 们 就 成 功 地 将 元 素 和 之 前 定义 的 mymove 关键 帧 绑 定 在 一 起 了 。 这 里 为 
了 兼容 各 种 内 核 的 浏览 器 ， 依 然 添加 了 针对 不 同 内 核 浏 览 器 的 前 绥 。 打 开 浏览 器 ， 发 现 动画 效果 并 
没有 出 现 ， 这 是 因为 我 们 还 没有 为 这 一 段 动画 定义 一 个 时 间 。 


(2) animation-duration 


animation-duration 属性 用 于 定义 一 个 时 间 段 , 在 这 个 时 间 段 中 会 按照 keyframes 中 定义 的 各 个 


百分比 执行 帧 动画 ， 和 transition-duration 


animation-duration 属性 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" > 





属性 类 似 。 下 面 的 示例 就 在 刚才 的 代码 中 加 入 


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
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<style type="text/css"> 

*{ 
margin: 0; 
padding: 0; 

; 

.main{ 
width: 100px; 
height: 100px; 
background:red; 
position:relative; 
animation-name:mymove 
-moz-animation-name:mymove; /* Firefox */ 
-webkit-animation-name:mymove; /* Safari and Chrome */ 
-0-animation-name:mymove; /* Opera */ 
animation-duration:3s 
-moz-animation-duration:3s; 
-webkit-animation-duration:3s; 
-0-animation-duration:3s; 

J 

(@keyframes mymove 

{ 
0%  {top:0px;} 
25% {top:200px;} 
50% {top:100px;} 
75% {top:200px;} 
100% {top:0px;} 

} 

(@-moz-keyframes mymove /* Firefox */ 

t 
0% Itop:Opx;; 
25% {top:200px;} 
50% {top:100px;} 
75% {top:200px;} 
100% {top:0px;} 

1 


(@-webkit-keyframes mymove /* Safari 和 Chrome */ 
{ 

0% {top:0px;} 

25% {top:200px;} 

50% {top:100px;} 

75% {top:200px;} 

100% {top:0px;} 
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(@-o-keyframes mymove /* Opera */ 
t 
0% Itop:0Opx;; 
25% {top:200px;} 
50% {top:100px;} 
75% {top:200px;} 
100% {top:0px;} 
} 
</style> 
</head> 
<body> 
<div class="main"></div> 
</body> 
</html> 


打开 浏览 器 ， 可 以 发 现 动画 效果 生效 了 。 我 们 发 现 ， 之 前 指定 的 那 段 动 画 在 3s 的 时 间 内 执行 
完成 。 在 这 3 秒 的 时 间 内 ,元 素 在 各 个 时 间 点 对 应 变化 到 mymove 中 定义 的 状态 ， 从 而 形成 了 动画 
效果 。 

(3 ) animation-time-function 

如 果 要 判断 在 某 个 时 间 段 内 的 各 个 状态 之 间 元 素 是 按照 什么 规律 切换 的 , 可 以 使 用 animation- 
time-function 定义 。animation-time-function 和 transition-time-function 类 似 ， 也 具有 相同 的 属性 值 ， 
用 来 定义 这 段 时 间 内 元 素 的 移动 速率 。 从 这 里 我 们 也 可 以 看 出 ， 其 实 keyframes 定义 的 关键 帧 动画 中 
的 每 一 段 都 对 应 着 一 个 transition 定义 的 动画 。 下 面 来 尝试 一 下 这 个 新 属性 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 


height: 100px; 

background:red; 

position:relative; 

animation-name:mymove 

-moz-animation-name:mymove; /* Firefox */ 
-webkit-animation-name:mymove; /* Safari and Chrome */ 


220 | HTML5+jQuery Mobile 移动 应 用 开发 





-0-animation-name:mymove; /* Opera */ 
animation-duration:3s 
-moz-animation-duration:3s; 
-webkit-animation-duration:3s; 
-0-animation-duration:3s; 
animation-time-function:ease-in-out; 
-moz-animation-time-function:ease-in-out; 
-webkit-animation-time-function:ease-in-out; 
-0-animation-time-function:ease-in-out; 

} 
(@keyframes mymove 

{ 

0% {top:0px;} 

25% {top:200px;} 

50% {top:100px;} 

75% {top:200px;} 

100% {top:0px;} 

; 


(@-moz-keyframes mymove /* Firefox */ 
x 

0%  {top:0px;} 

25% {top:200px;} 

50% {top:100px;} 

75% {top:200px;} 

100% {top:0px;} 
} 


(@-webkit-keyframes mymove /* Safari 和 Chrome */ 
í 

0% Itop:Opx;; 

25% {top:200px:} 

50% {top:100px;} 

75% {top:200px:} 

100% {top:0px;} 
|; 


(@-o-keyframes mymove /* Opera */ 
{ 

0% (top:Opx;; 

25% {top:200px;} 

50% {top:100px;} 

75% {top:200px;} 

100% {top:0px;} 
; 


</style> 
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</head> 
<body> 
<div class="main"></div> 
</body> 
</html> 


在 浏览 器 中 查看 动画 ， 发 现 效 果 发 生 了 明显 的 区 别 。 默认 情况 下 使 用 的 是 linear 动画 效果 ， 添 
加 刚才 的 animation-time-function 中 将 动画 效果 改变 为 ease-in-out。 


(4) animation-iteration-count 
动画 3s 之 后 ， 也 就 是 进行 完 一 个 完整 的 周期 之 后 就 结束 了 。 那 么 怎样 才能 让 动画 执行 多 次 ， 
甚至 是 无 限 次 地 执行 呢 ? 这 里 可 以 使 用 animation-iteration-count 属性 。 可 以 为 该 属性 传递 一 个 值 ， 
表示 动画 将 要 执行 的 次 数 。 也 可 以 为 这 个 属性 传 入 infinite， 表 示 动 画 可 以 无 限 次 地 循环 。 加 入 
animation-iteration-count 属性 ， 再 看 一 下 动画 效果 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
=a 
margin: 0; 
padding: 0; 
} 
main{ 
width: 100px; 
height: 100px; 
background:red; 





position:relative; 

animation-name:mymove 
-moz-animation-name:mymove; /* Firefox */ 
-webkit-animation-name:mymove; /* Safari and Chrome */ 
-o-animation-name:mymove; /* Opera */ 
animation-duration:3s 
-moz-animation-duration:3s; 
-webkit-animation-duration:3s; 
-0-animation-duration:3s; 
animation-time-function:ease-in-out; 
-moz-animation-time-function:ease-in-out; 
-webkit-animation-time-function:ease-in-out; 
-0-animation-time-function:ease-in-out; 
animation-iteration-count: infinite; 


-moz-animation-iteration-count: infinite; 
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-webkit-animation-iteration-count: infinite; 
-0-animation-iteration-count: infinite; 
J. 
(@keyframes mymove 
{ 
0% {top:0px;} 
25% {top:200px;} 
50% {top:100px;} 
75% {top:200px;} 
100% {top:0px;} 
} 


@-moz-keyframes mymove /* Firefox */ 
{ 

0% (top:Opx;; 

25% {top:200px;} 

50% {top:100px;} 

75% {top:200px;} 

100% {top:0px;} 

} 


(@-webkit-keyframes mymove /* Safari 和 Chrome */ 
{ 

0% {top:Opx;} 

25% {top:200px;} 

50% {top:100px;} 

75% {top:200px;} 

100% {top:0px;} 
} 


(@-o-keyframes mymove /* Opera */ 
{ 
0% Itop:0Opx;) 
25% {top:200px;} 
50% {top:100px;} 
75% {top:200px;} 
100% {top:0px;} 
} 
</style> 
</head> 
<body> 
<div class="main"></div> 
</body> 
</html> 


可 以 看 到 ， 这 次 的 动画 并 没有 执行 一 次 就 停止 ， 而 是 开始 了 无 限 次 的 执行 。 当 然 ， 也 可 以 设 





定 具 体 的 数值 ， 让 动画 执行 一 次 就 结束 。 
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(5) animation-delay 
animation-delay 属性 和 transition-delay 属性 类 似 ， 都 是 设 定 元 素 一 段 时 间 后 再 执行 动画 效果 。 
这 个 属性 其 实 是 很 常用 的 ， 用 起 来 也 比较 方便 。 举 一 个 应 用 场景 的 例子 ,假如 现在 有 一 个 表单 ， 想 
实现 的 效果 是 在 用 户 没有 在 表单 内 输入 内 容 的 时 候 给 出 提示 信息 。 提 示 信 息 显 示 3s 后 会 自动 慢 慢 
进行 隐藏 。 这 其 实 可 以 使 用 animation-delay 方法 实现 。 
有 了 上 面 讲 的 内 容 ， 就 可 以 自己 编写 一 个 动画 效果 了 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
"t 
margin: 0; 
padding: 0; 
} 
.main{ 
width: 100px; 
height: 100px; 
background:red; 
position:relative; 
animation-name:mymove 
-moz-animation-name:mymove; /* Firefox */ 
-webkit-animation-name:mymove; /* Safari and Chrome */ 
-o-animation-name:mymove; /* Opera */ 
animation-duration:3s 





-moz-animation-duration:3s; 
-webkit-animation-duration:3s; 
-o-animation-duration:3s; 
animation-time-function:ease-in-out; 
-moz-animation-time-function:ease-in-out; 
-webkit-animation-time-function:ease-in-out; 
-0-animation-time-function:ease-in-out; 
animation-iteration-count: infinite; 
-moz-animation-iteration-count: infinite; 
-webkit-animation-iteration-count: infinite; 
-0-animation-iteration-count: infinite; 

h 

(@keyframes mymove 

í 
0% {top:0px;background: green;width: 200px;} 
25% {top:200px;background: yellow;width: 300px;} 
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50% {top:100px;background: pink;width: 200px;} 
75% {top:200px;background: blue;width: 100px;} 
100% {top:0px;background: red;width: 50px;} 

} 

@-moz-keyframes mymove /* Firefox */ 

{ 
0% {top:0px;background: green;width: 200px; } 
25% {top:200px;background: yellow;width: 300px; } 
50% {top:100px;background: pink;width: 200px; } 
75% {top:200px;background: blue;width: 100px;} 
100% {top:0px;background: red;width: 50px;} 

} 


(@-webkit-keyframes mymove /* Safari 和 Chrome */ 

{ 
0% {top:0px;background: green;width: 200px;} 
25% {top:200px;background: yellow;width: 300px;} 
50% {top:100px;background: pink;width: 200px;} 
75% {top:200px;background: blue;width: 100px;} 
100% {top:0px;background: red;width: 50px;} 

} 


(@-o-keyframes mymove /* Opera */ 
{ 
0% I(top:Opx;background: green;width: 200px;} 
25% {top:200px;background: yellow;width: 300px;} 
50% {top:100px;background: pink;width: 200px;} 
75% {top:200px;background: blue;width: 100px;} 
100% {top:0px;background: red;width: 50px;} 
|; 
</style> 
</head> 
<body> 
<div class="main"></div> 
</body> 
</html> 


打开 浏览 器 ， 可 以 看 到 很 炫 酷 的 动画 效果 。 其 实 ， 还 可 以 和 transform 配合 ， 让 动画 效果 更 加 


炫 酷 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
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<style type="text/css"> 

iad 
margin: 0; 
padding: 0; 

} 

.main{ 
width: 100px; 
height: 100px; 
background:red; 
position:relative; 
margin: 0 auto; 
margin-top: 250px; 
animation-name:mymove 
-moz-animation-name:mymove; /* Firefox */ 
-webkit-animation-name:mymove; /* Safari and Chrome */ 
-0-animation-name:mymove; /* Opera */ 
animation-duration:5s 
-moz-animation-duration:3s; 
-webkit-animation-duration:5s; 
-0-animation-duration:3s; 
animation-time-function:ease-in-out; 
-moz-animation-time-function:ease-in-out; 
-webkit-animation-time-function:ease-in-out; 
-0-animation-time-function:ease-in-out; 
animation-iteration-count: infinite; 
-moz-animation-iteration-count: infinite; 
-webkit-animation-iteration-count: infinite; 
-0-animation-iteration-count: infinite; 

; 

(@keyframes mymove 

{ 
0% (background: green; transform: rotate(30deg) scale(2);} 
25% {background: yellow; transform: rotate(90deg) scale(3);} 
50% {background: pink; transform: rotate(-120deg) scale(0.5);} 
75% {background: blue; transform: rotate(-45deg) scale(0.25);} 
100% {background: red; transform: rotate(45deg);} 

} 


@-moz-keyframes mymove /* Firefox */ 

t 
0% {top:0px;background: green;width: 200px;} 
25% {top:200px;background: yellow;width: 300px;} 
50% {top:100px;background: pink;width: 200px;} 
75% {top:200px;background: blue;width: 100px;} 
100% {top:0px;background: red;width: 50px;} 
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} 


(@-webkit-keyframes mymove /* Safari 和 Chrome */ 

{ 
0% {top:0px;background: green;width: 200px; } 
25% {top:200px;background: yellow:width: 300px; } 
50% {top:100px;background: pink;width: 200px; } 
75% {top:200px;background: blue;width: 100px;} 
100% {top:0px;background: red;width: 50px;} 

} 


(@-o-keyframes mymove /* Opera */ 
í 
0% {top:0px;background: green;width: 200px; } 
25% {top:200px;background: yellow;width: 300px; } 
50% {top:100px;background: pink;width: 200px; } 
75% {top:200px;background: blue;width: 100px;} 
100% {top:0px;background: red;width: 50px;} 
i 
</style> 
</head> 
<body> 
<div class="main"></div> 
</body> 
</html> 


查看 动画 效果 ， 发 现在 每 次 重复 的 时 候 都 会 有 一 个 卡 顿 ， 这 种 体验 对 于 用 户 很 不 好 。 这 里 有 
一 个 小 技巧 ， 在 开发 动画 效果 的 时 候 一 定 要 注意 一 一 使 用 keyframes 定义 帧 动画 时 ， 一 定 要 让 第 一 
帧 和 最 后 一 帧 处 在 相同 的 状态 。 下 面 的 动画 就 使 用 了 这 个 技巧 ， 让 开发 出 来 的 动画 效果 十 分 流畅 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
| 
margin: 0; 
padding: 0; 
} 
.main{ 
width: 100px; 
height: 100px; 
background:red; 
position:relative; 
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margin: 0 auto; 
margin-top: 250px; 
animation-name:mymove 
-moz-animation-name:mymove; /* Firefox */ 
-webkit-animation-name:mymove; /* Safari and Chrome */ 
-0-animation-name:mymove; /* Opera */ 
animation-duration:3s 
-moz-animation-duration:3s; 
-webkit-animation-duration:3s; 
-0-animation-duration:3s; 
animation-time-function:ease-in-out; 
-moz-animation-time-function:ease-in-out; 
-webkit-animation-time-function:ease-in-out; 
-o-animation-time-function:ease-in-out; 
animation-iteration-count: infinite; 
-moz-animation-iteration-count: infinite; 
-webkit-animation-iteration-count: infinite; 
-0-animation-iteration-count: infinite; 

} 

(@keyframes mymove 

u 
0% {background: green; transform: rotate(0deg) scale(1);} 
25% {background: yellow; transform: rotate(90deg) scale(2);} 
50% (background: pink; transform: rotate(-120deg) scale(1);} 
75% (background: blue; transform: rotate(-45deg) scale(0.5);} 
100% (background: red; transform: rotate(0deg) scale(1);} 

; 

(@-moz-keyframes mymove /* Firefox */ 

t 
0% {top:0px;background: green;width: 200px;} 
25% {top:200px;background: yellow;width: 300px;} 
50% {top:100px;background: pink;width: 200px;} 
75% {top:200px;background: blue;width: 100px;} 
100% {top:0px;background: red;width: 50px;} 

} 


(@-webkit-keyframes mymove /* Safari 和 Chrome */ 

{ 
0% {top:0px;background: green;width: 200px;} 
25% {top:200px;background: yellow;width: 300px;} 
50% {top:100px;background: pink;width: 200px;} 
75% {top:200px;background: blue;width: 100px;} 
100% {top:0px;background: red;width: 50px;} 
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(@-o-keyframes mymove /* Opera */ 
{ 
0% {top:0px;background: green;width: 200px;} 
25% {top:200px;background: yellow;width: 300px;} 
50% {top:100px;background: pink;width: 200px;} 
75% {top:200px;background: blue;width: 100px;} 
100% {top:0px;background: red;width: 50px;} 
} 
</style> 
</head> 
<body> 
<div class="main"></div> 
</body> 
</html> 


熟练 掌握 CSS3 的 动画 ， 可 以 轻松 地 实现 各 种 各 样 的 动画 效果 。 试 着 用 本 章 讲 解 的 内 容 制作 一 
个 移动 端 页 面 加 载 前 的 加 载 图 标 自 定义 效果 吧 。 


DOM 操作 


本 章 内 容 要 点 : 
%* 如 何 通过 DOM 获得 文档 元 素 


JavaScript 的 主要 功能 之 一 是 控制 HTML 文档 中 的 各 个 元 素 ， 使 用 JavaScript 控制 文档 元 素 就 
叫 作 DOM 操作 。 本 章 将 介绍 JavaScript 中 各 种 DOM 操作 方法 ， 灵 活 实用 这 些 方法 可 以 随时 对 
HTML 文档 中 的 各 个 元 素 进行 变化 ， 可 以 应 用 于 增强 用 户 交 互 性 、 实 现 页 面 动态 加 载 等 多 种 情境 。 


13.1 DOM 是 什么 


DOM 的 中 文 含义 是 文档 对 象 模型 ， 提 供 了 对 文档 的 结构 化 表述 ， 并 定义 了 一 种 可 以 从 程序 中 
对 该 结构 进行 访问 的 方式 ， 从 而 改变 文档 的 结构 、 样 式 和 内 容 。 在 开发 HTML 的 时 候 ， 其 实 就 是 
在 指定 文档 对 象 模型 。 

一 个 Web 页 面 就 是 一 个 文档 ， 在 开发 Web 页 面 时 ， 首 先 要 写 的 就 是 HTML， 以 此 来 定义 文档 
的 结构 。 这 个 定义 的 Web 文档 有 三 种 表现 形式 : 

(1) 在 浏览 嚣 中， 表现 为 一 个 可 视 化 的 页 面 。 

(2) 在 编辑 器 中 ， 表 现 为 一 些 HTML 代码 。 

(3) 在 JavaScript 中 ， 表 现 为 一 个 DOM 对 象 。 

也 就 是 说 ，DOM 对 象 的 作用 就 是 方便 开发 者 通过 JavaScript 操作 Web 文档 的 ， 可 以 使 用 
JavaScript 通过 DOM 对 象 来 影响 Web 文档 的 表现 形式 。 
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13.2 ”通过 DOM 获取 文档 元 素 


在 Web 文档 中 ， 如 果 想 操作 Web 文档 中 的 元 素 ， 首 先 必须 获取 这 些 元 素 。DOM 提供 了 可 以 
获得 Web 文档 中 获取 元 素 的 方法 ， 这 些 方法 都 属于 document 对 象 。 下 面 来 介绍 这 些 方法 的 使 用 。 


13.2.1 getElementByld() 方 法 
getElementById() 方 法 用 来 获取 指定 id 属性 的 一 个 元 素 ， 要 传 入 的 就 是 要 选择 元 素 的 对 应 id。 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div id="div1"></div> 
<div id="div2"></div> 
<script type="text/javascript"> 
var divl = document.getElementById("div1"); 
</script> 
</body> 
</html> 


通过 上 面 的 JavaScript 代码 获取 到 了 id 名 为 divl 的 div 元 素 ， 也 就 是 HTML 结构 中 的 第 一 个 
div 元 素 。 
13.2.2 innerHTML 方法 


为 了 能 看 出 我 们 选择 到 的 是 哪个 元 素 ， 可 以 使 用 innerHTML 方法 为 选中 的 元 素 添 加 一 些 文本 
内 容 。innerHTML() 方 法 用 来 为 选中 的 Web 文档 元 素 添加 内 嵌 的 HTML 代码 。 


【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 

-divlf 
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width: 200px; 
height: 200px; 
margin-bottom: 100px; 
background: green; 
color: white; 
} 
.div2{ 
width: 200px; 
height: 200px; 
margin-bottom: 100px; 
background: red; 
color: white; 
} 
</style> 
</head> 





iv1">div1</div> 
<div id="div2">div2</div> 
<script type="text/javascript"> 
var divl = document.getElementByld("div1"); 
divl.innerHTML += "我 是 被 选中 的 元 素 "; 
</script> 
</body> 
</html> 


查看 代码 可 以 发 现 ， 第 一 个 div 内 部 添加 了 指定 的 文字 内 容 ， 说 
明 选 中 了 这 个 元 素 ， 如 图 13-1 所 示 。 

如 果 页 面 中 存在 多 个 id 属性 值 和 getElementById() 方 法 中 传 入 的 
id 值 相 同 ， 就 只 会 选择 第 一 个 对 应 id 值 的 元 素 。 














13-1 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
#div1{ 
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width: 200px; 
height: 200px; 
margin-bottom: 100px; 
background: green; 
color: white; 
} 
#div2{ 
width: 200px; 
height: 200px; 
margin-bottom: 100px; 
background: red; 
color: white; 
; 
</style> 
</head> 
<body> 
<div id="div1">div1</div> 
<div id="div1">div1</div> 
<script type="text/javascript"> 
var divl = document.getElementById("div1"); 
divl.innerHTML += "我 是 被 选中 的 元 素 "; 
</script> 
</body> 
</html> 


效果 如 图 13-2 所 示 。 

上 面 的 代码 中 ， 在 一 个 Web 文档 中 指定 了 两 个 id 属性 值 为 div 
的 元 素 , 并 通过 getElementById() 方 法 获取 ， 最 后 的 结果 是 只 有 第 一 个 
id 值 为 divl 的 元 素 被 选中 了 。 

如 果 为 getELementById0 方 法 传 入 的 值 是 一 个 在 Web 文档 中 并 不 
存在 的 id 属性 值 ， 那 么 返回 的 结果 是 null。 

















【示例 】 图 13-2 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
#div1í 
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width: 200px; 
height: 200px; 
margin-bottom: 100px; 
background: green; 
color: white; 
; 
#div2{ 
width: 200px; 
height: 200px; 
margin-bottom: 100px; 
background: red; 
color: white; 
; 
</style> 
</head> 
<body> 
<div id="div1">div1</div> 
<div id="div1">div1</div> 
<script type="text/javascript"> 
var div3 = document.getElementByld("div3"); 
console.log(div3); 
</script> 
</body> 
</html> 


效果 如 图 13-3 所 示 。 








图 13-3 


documentgetElementById() 方 法 是 最 基本 的 元 素 选择 器 ， 但 是 这 个 方法 只 能 选择 某 一 个 元 素 。 
13.2.3 getElementsByTagName() 方 法 


getElementsByTagName() 方 法 用 来 获取 对 应 标签 名 的 所 有 元 素 ,最 后 返回 的 是 这 些 元 素 组 成 的 
数组 。 比 如 ，getElementsByTagName("input") 获 取 到 的 就 是 整个 Web 文档 中 的 所 有 <input> 元 素 ， 
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这 些 <input> 元 素 被 存在 一 个 数组 中 。 如 果 想 访问 页 面 中 的 第 二 个 <input> 元 素 ， 可 以 使 用 索引 值 为 
1 进行 获取 。 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
div{ 
width: 100px; 
height: 100px; 
margin-bottom: 50px; 
background: green; 
color: white; 
; 
</style> 
</head> 
<body> 
<div>div1</div> 
<div>div2</div> 
<div>div3</div> 
<script type="text/javascript"> 
var divs = document.getElementsByTagName(" div"): 
for(var i = 0; i < divs.length; i ++){ 
divs[i].innerHTML = "我 是 第 " + i+" 个 div 元 素 "; 
</script> 
</body> 
</html> 


【代码 解析 】 使 用 document.getElementsByTagName() 方 法 获取 到 了 Web 文档 中 的 所 有 div 
,这 些 元 素 被 存储 在 divs 中 ， 是 一 个 数组 。 在 接 下 来 的 代码 中 , 使 用 for 循环 遍历 了 divs 数组 ， 
并 为 每 个 元 素 设 置 innerHTML 的 值 。 


13.2.4 ” getElementsByClassName() 方 法 








getElementsByClassName() 方 法 用 来 获取 所 有 具有 指定 class 属性 值 的 元 素 , 返回 的 也 是 一 个 数 
组 ， 和 document.getElementsByTagName() 类 似 ， 可 以 通过 索引 获取 到 对 应 的 元 素 。 

在 以 前 ， 原 生 的 JavaScript 中 是 没有 根据 class 名 获取 元 素 这 一 方式 的 ， 如 果 想 通过 类 名 获取 
元 素 ， 需 要 自己 编写 类 似 的 方法 ,但 是 更 多 的 是 使 用 jQuery 中 的 元 素 选择 器 。 现 在 的 
getElementsByClassName()fE Internet Explorer 5/6/7/8 中 无 效 。 
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【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" > 


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 


<style type="text/css"> 
div í 
width: 100px; 
height: 100px; 
margin-bottom: 50px; 
background: green; 
color: white; 
h 
</style> 
</head> 
<body> 
<div class="main">div1</div> 
<div class="main">div2</div> 
<div class="main">div3</div> 
<script type="text/javascript"> 
var mains = document.getElementsByClassName("main"); 
console.log(mains); 
for(var i= 0; i < mains.length; i ++){ 
mains[i].innerHTML = "我 是 第 "+i +" 个 div 元 素 "; 
] 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 , 使 用 document.getElementsByClassName() 方 法 获 
取 到 了 所 有 类 名 为 main 的 元 素 ， 然 后 分 别 修 改 它们 的 innerHTML 值 ， 
效果 如 图 13-4 所 示 。 





图 13-4 
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13.3 DOM 节点 


DOM 节点 指 的 就 是 组 成 Web 文档 的 元 素 。DOM 节点 有 很 多 种 ，HTML 中 的 每 部 分 内 容 都 对 
应 着 一 个 类 型 的 节点 ， 就 连 注释 也 有 注释 节点 。 每 个 节点 之 问 都 有 一 定 的 关系 ， 这 些 节 点 以 及 这 些 
节点 之 间 的 关系 就 组 成 了 一 个 完整 的 HTML 结构 。 


13.34 节点 之 间 的 关系 


节点 之 间 的 关系 通常 被 描述 成 DOM 树 。Web 文档 本 身 就 是 一 个 节点 ，Web 文档 中 的 第 一 个 
标签 就 是 <html>。 这 个 HTML 也 是 一 个 节点 ， 既 是 Web 文档 的 子 节点 ， 也 是 <html> 之 中 所 有 元 素 
的 祖先 节点 ， 也 称 之 为 根 节 点 。 在 HTML 节点 下 会 有 head 节点 、body 节点 等 。body 节点 下 会 有 
多 个 div 节点 ， 这 些 并 列 的 div 节点 同 级 ， 称 之 为 兄弟 节点 。 节 点 之 间 就 通过 这 种 父子 节点 、 兄 弟 
节点 的 关系 组 成 了 HTML 文档 。 

在 JavaScript 中 ， 开 发 者 除了 可 以 通过 选择 器 直接 选择 HTML 文档 中 的 元 素 ， 还 可 以 利用 这 
些 节 点 之 间 的 关系 间接 选择 开发 者 想 要 的 元 素 。JavaScript 中 提供 了 一 些 通过 节点 关系 获取 元 素 的 
方法 ， 这 些 方 法 是 每 一 个 DOM 元 素 都 有 的 ， 可 以 通过 一 个 DOM 访问 到 其 他 的 DOM 元 素 。 


1. parentNode 属性 
parentNode 属性 用 来 获取 某 个 元 素 的 父 元 素 ， 下 面 是 一 个 例子 。 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
.main{ 
width: 200px; 
height: 300px; 
border: 2px solid black; 
position: relative; 
] 
.child{ 
width: 100px; 
height: 100px; 
background: red: 
position: absolute; 
right: 0; 
bottom: 0; 





.footer{ 
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width: 200px; 
height: 100px; 
border: 2px solid green; 
} 
</style> 
</head> 
<body> 
<div class="main"> 
<div class="child"></div> 
</div> 
<div class="footer"></div> 
<script type="text/javascript"> 
var child = document.getElementsByClassName("child")[0]; 
console.log(child) 
var parent = child.parentNode; 
parent.innerHTML += "选中 父 元 素 了 ! " 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 ， 首 先 通过 document.getElementsByClassName ("child")[0] 获 取 到 了 child 元 


素 ， 然 后 调用 child 元 素 的 parentNode 属性 获取 到 child 元 素 的 父 元 素 ， 即 parent 元 素 ， 最 后 为 选 
中 的 元 素 添 加 一 段 文字 内 容 来 表示 选中 了 这 个 元 素 。 效 果 如 图 13-5 所 示 。 








图 13-5 


2. childNodes 属性 
childNodes 属性 用 来 获取 一 个 元 素 的 所 有 子 节点 , 最 后 返回 的 是 一 个 数组 ， 可 以 根据 索引 从 数 
组 中 获取 到 相应 的 元 素 。childNodes 属性 只 能 获得 一 个 节点 的 直接 子 节点 ， 不 能 获取 子 节点 的 子 节 
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【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name=" 
<style type="text/css"> 
.main{ 
width: 200px; 
height: 300px; 
border: 2px solid black; 
position: relative; 
} 
.child{ 
width: 100px; 
height: 80px; 
background: red; 
margin-bottom: 10px; 
; 
</style> 
</head> 
<body> 
<div class="main"> 
<div class="child"></div> 
<div class="child"></div> 
<div class="child"></div> 
</div> 
<script type="text/javascript"> 
var parent = document.getElementsByClassName("main")[0]; 
var childs = parent.childNodes; 
for(var i = 0; i < childs.length; i ++){ 
childs[i].innerHTML = "我 是 第 " + i+ "个 子 元 素 "; 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 ， 通 过 childNodes 属性 获取 了 parent 元 素 的 所 有 子 节点 ， 然 后 设置 这 些 节点 
的 innerHTML 值 ， 效 果 如 图 13-6 所 示 。 

3. previousSibling 属性 和 nextSibling 属性 

除了 可 以 获取 一 个 元 素 的 子 节点 和 父 节 点 之 外 ， 还 可 以 获取 与 一 个 元 素 同 级 的 元 素 ， 称 之 为 兄 
弟 节点 。 在 JavaScript 中 ， 有 两 个 方法 用 于 获取 一 个 元 素 的 兄弟 节点 。previousSibling 属性 用 于 获取 
一 个 节点 的 前 一 个 兄弟 节点 ; nextSibling 属性 用 于 获取 一 个 节点 的 后 一 个 兄弟 节点 。 


viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
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图 13-6 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
.main{ 
width: 200px; 
height: 300px; 
border: 2px solid black; 
position: relative; 
} 
.child{ 
width: 100px; 
height: 80px; 
background: red; 
margin-bottom: 10px; 
} 
</style> 
</head> 
<body> 
<div class="main"> 
<div class="child" id="child1"></div> 
<div class="child" id="child2"> 目 标 元 素 </div> 
<div class="child" id="child3"></div> 
</div> 
<script type="text/javascript"> 
var target = document.getElementById("child2"); 
Var pre = target.previousSibling; 
var next = target.nextSibling; 
pre.innerHTML = "我 是 目标 节点 的 前 一 个 兄弟 节点 "; 
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nextinnerHTML = "我 是 目标 节点 的 后 一 个 兄弟 节点 "; 
</script> 
</body> 
</html> 


开发 者 获取 了 一 个 元 素 的 上 一 个 兄弟 节点 和 下 一 个 兄弟 节点 ， 并 为 它们 设置 了 内 容 。 打 开 浏 
览 器 ， 发 现 并 没有 出 现 预期 的 效果 ， 这 是 为 什么 呢 ? 

再 回头 看 一 下 之 前 的 HTML 代码 : 

<div class="child" id="child1"></div> 

<div class="child" id="child2"> 目 标 元 素 </div> 

<div class="child" id="child3"></div> 

我 们 发 现 ， 按 照 开 发 者 的 习惯 ， 写 出 的 HTML 代码 都 是 有 换行 的 ， 换 行 后 的 空白 位 置 在 Web 
文档 中 也 是 一 个 节点 。 也 就 是 说 ， 刚 才 的 方法 获取 到 的 nextSibling 和 previousSibling 其 实 是 两 个 空 
白 部 分 ， 这 种 节点 叫 作文 档 节点 。 如 果 改 一 下 之 前 的 HTML 代码 : 

<div class="child" id="child1"></div><div class="child" id="child2"> 目标 元 素 </div><div class="child" 
id="child3"></div> 

我 们 手动 将 div 标签 之 间 的 空白 符 删 掉 ， 打 开 浏 览 器 查看 效果 ， 
如 图 13-7 所 示 。 

可 以 发 现 ， 这 次 的 代码 成 功 选中 了 前 后 兄弟 节点 元 素 ， 因 为 已 经 
消除 了 空白 的 文本 节点 。 


13.3.2 节点 的 属性 


下 面 介绍 的 属性 是 每 个 节点 都 可 以 访问 到 的 ， 通 过 这 些 元 素 可 以 
设置 获得 元 素 的 某 些 属性 信息 。 


1. innerHTML 属性 图 13-7 


在 上 面 的 许多 例子 中 都 使 用 了 innerHTML 属性 ，innerHTML 属性 用 来 获取 或 者 替换 某 个 元 素 
的 内 容 。 任 何 一 个 HTML 元 素 都 有 innerHTML 属性 ， 如 果 使 用 innerHTML 获取 或 者 设置 内 容 ， 
可 以 在 内 容 中 使 用 HTML 标签， 最 后 的 结果 是 innerHTML 中 编写 的 HTML 标签 内 容 会 得 到 解析 。 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
div{ 
width: 200px; 
height: 200px; 
margin-bottom: 20px; 
} 
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#main1{ 
background: green; 
} 
#main2{ 
background: red; 
} 
</style> 
</head> 
<body> 
<div id="main1"> 
<p> 我 是 内 容 </p> 
<span> 我 是 内 容 </span> 
</div> 
<div id="main2"></div> 
<script type="text/javascript"> 
var main1 = document.getElementByld("main 1"); 
var content = main l.innerHTML; 
console.log(content); 
</script> 
</body> 
</html> 


上 面 的 代码 中 使 用 innerHTML 属性 获取 到 了 id 属性 值 为 mainl 的 div 元 素 的 内 容 ， 然 后 在 
chrome 浏览 器 的 控制 台中 打印 出 了 innerHTML 内 容 。 可 以 看 到 ， 返 回 的 内 容 就 是 mainl 元 素 内 部 
的 全 部 HTML 标签 ， 如 图 13-8 所 示 。innerHTML 可 以 设置 元 素 内 容 的 含义 指 的 是 可 以 设置 其 在 
HTML 结构 维度 下 的 内 容 。 


iPhone6 Y 375 x 667 96%v € : [m Elements Console Sources 。 Network 
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<p> 我 是 内 容 </p> 
<5pan> 我 是 内 容 </5pan> 








图 13-8 
同样 ， 可 以 使 用 innerHTML 属性 设置 一 个 元 素 内 部 的 HTML 结构 内 容 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 


<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
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<style type="text/css"> 
div í 
width: 200px; 
height: 200px; 
margin-bottom: 20px; 
} 
#mainl { 
background: green; 
j 
#main2{ 
background: red; 
} 
</style> 
</head> 
<body> 
<div id="main1"> 
<p> 我 是 内 容 </p> 
<span> 我 是 内 容 </span> 
</div> 
<div id="main2"></div> 
<script type="text/javascript"> 
var main] = document.getElementByld("main 1"); 
var main2 = document.getElementByld("main2"); 
var content = main 1.innerHTML; 
main2.innerHTML = content; 
</script> 
</body> 
</html> 


在 获取 到 main! 元 素 的 innerHTML 内 容 之 后 ， 将 这 些 内 容 
同样 使 用 innerHTML 方法 赋值 到 main2 元 素 当 中 ， 从 而 改变 了 
main2 元 素 的 HTML 结构 内 容 ， 如 图 13-9 所 示 。 

使 用 节点 的 innerHTML 属性 可 以 让 开发 者 非常 方便 地 操作 
一 个 节点 内 部 的 HTML 结构 , 这 在 JavaScript 开发 中 是 一 个 很 常 
用 的 技巧 。 

2. nodeType 属性 

nodeType 属性 用 来 返回 某 一 个 节点 的 节点 类 型 。 在 DOM 
中 ， 有 很 多 种 类 型 的 节点 ，div、p 等 标签 对 应 的 是 元 素 节 点 ， 而 
上 面 讲 到 的 空白 部 分 属于 文本 节点 。 在 DOM 中 比较 重要 ， 需 要 
了 解 的 节点 类 型 以 及 它们 对 应 的 nodeType 属性 值 如 表 13-1 所 示 。 





























13-9 
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表 13-1 重要 元 素 类 型 的 nodeType 属性 


元 素 类 型 nodeType 
元 素 
属性 
文本 
注释 
文档 


可 以 看 到 ， 每 一 个 nodeType 的 值 都 是 一 个 代号 ， 对 应 着 一 个 确定 的 节点 类 型 。 


(1) 元 素 节点 

每 一 个 HTML 元 素 都 是 元 素 节 点 。 元 素 节点 也 是 最 常用 的 节点 , 在 HTML 文档 中 的 所 有 标签 ， 
如 <div>、<p>、<span> 等 ， 都 是 元 素 节点 。 

(2) 属性 节点 

每 一 个 HTML 元 素 节点 可 能 都 对 应 着 一 些 属性 ， 这 些 属性 就 是 属性 节点 ， 在 “<div 
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id="main"></div>” 这 段 代 码 中 ，div 是 元 素 节 点 ， 而 id 属性 就 是 属性 节点 。 

(3) 文本 节点 

文本 节点 表示 元 素 节点 属性 节点 中 的 文本 内 容 。 例 如 ， 在 “<div> 我 是 一 个 元 素 节 点 </div>” 
这 段 代码 中 ， 文 字 “ 我 是 一 个 元 素 节点 ”就 是 div 这 个 元 素 节点 内 部 的 文本 节点 。 


(4 ) 注释 节点 
注释 节点 指 的 是 在 HTML 文档 中 出 现 的 注释 部 分 的 内 容 ， 这 些 虽 然 也 是 文本 ， 但 是 和 文本 属 


siapa 因为 浏览 器 在 处 理 HTML 中 的 这 些 文本 时 要 按照 注释 的 形式 进行 处 理 ， 所 以 这 些 
会 带 有 固定 的 注释 指令 。 
下 面 的 例子 展示 了 一 个 HTML 结构 中 各 种 类 型 的 节点 以 及 它们 对 应 的 nodeType 属性 值 。 
<!DOCTYPE> 
<html> 
<head> 


<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
div{ 
width: 100px; 
height: 100px; 
margin-bottom: 50px; 
background: green; 
color: white; 
b 
#result{ 
background: white; 
] 
</style> 
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</head> 
<body> 
<div id="main" class="content"> 
<p> 我 是 p 标签 内 的 内 容 </p> 
我 是 div 标签 内 的 内 容 
</div> 
<div id="result"></div> 
<script type="text/javascript"> 
var main = document. getElementById("main"); 
var result = document. getElementByld("result"); 
var p = main.childNodes; 
var content = 
main.nodeName + main.nodeType; 
result.innerHTML = content; 
</script> 
</body> 
</html> 
在 上 面 的 代码 中 ， 定 义 了 一 个 完整 的 HTML 结构 。 
然后 ， 打 开 浏 览 器 ， 在 Chrome 控制 台 下 查看 nodeType 
类 型 ， 如 图 13-10 所 示 。 
content 是 获取 到 的 主 元 素 ， 接 下 来 使 用 childNodes 
属性 获取 到 content 下 的 所 有 子 元 素 ， 并 且 逐 一 检查 其 下 
元 素 的 nodeType 值 。 通 过 这 样 的 检查 可 以 看 到 ，main 元 
素 下 有 三 个 子 节点 ， 通 过 返回 的 nodeType 值 可 以 判断 它 
们 分 别 是 文本 车 点、 元素 节点 、 文 本 节点 。 回 想 之 前 的 
那个 例子 中 获取 兄弟 元 素 时 空白 部 分 被 当 作 了 一 个 节 
点 ， 可 以 发 现 ， 确 实 存在 这 种 节点 ， 而 且 对 应 的 就 是 文 
本 节点 。 下 面 检测 一 个 p 标签 下 的 子 节点 ， 如 图 13-11 所 示 。 
获取 到 p 标签 后 ， 发 现 其 中 只 有 一 个 子 元 素 ， 就 是 文本 内 容 ， 其 nodeType 为 3， 表明 这 是 文 
本 节点 。 


> var content = document.getElementById("main") 
undefined 
> main.nodeType 

1 


var children = content.childNodes; 
undefined 
> children[0].nodeType 

3 





> children[1].nodeType 
1 


b children[2] .nodeType 
3 








图 13-10 
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> var p = document. getElementById("main").childNodes [1] 
undefined 
> p.childNodes [0] 
“我 是 p 标 签 内 的 内 容 ” 
> | 





图 13-11 

nodeType 属性 的 作用 在 于 ， 对 于 某 些 JavaScript 操作 ， 不 同 的 节点 类 型 会 对 应 不 同 的 操作 方 
法 。 在 进行 某 些 关 于 节点 的 操作 时 ， 首 先 需 要 对 nodeType 的 值 进行 判断 ， 再 根据 确定 的 节点 类 型 
进行 不 同 的 操作 。 
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3. nodeValue 属性 


nodeValue 属性 返回 节点 的 值 。 在 使 用 这 个 属性 时 ， 就 体现 了 不 同类 型 的 节点 返回 值 规则 的 区 
别 了 。 如 果 是 元 素 节 点 ，nodeValue 返回 null 或 者 undefined; 如 果 是 文本 节点 ，nodeValue 返回 的 
是 这 个 文本 节点 中 的 文本 内 容 ; 如 果 是 属性 节点 , nodeValue 返回 的 是 这 个 属性 对 应 设置 的 属性 值 。 

仍然 使 用 之 前 的 代码 ， 在 Chrome 的 控制 台中 调试 这 些 节 点 的 nodeValue 值 ， 效 果 如 图 13-12 
所 示 。 
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> var content = document.getElementById("main") 
undefined 

> var p = document.getElementById("main").childNodes[1] 
undefined 

> content.nodeValue 
null 

> p.childNodes [0] .nodeValue 
"我 是 p 标 签 内 的 内 容 ” 

> 


图 13-12 


4. nodeName 属性 


nodeName 属性 用 来 返回 节点 的 名 字 。 对 于 不 同类 型 的 节点 ， 其 nodeName 返回 的 规则 也 很 
不 同 。 
@ 如 果 节 点 是 元 素 节点 ， 返 回 的 nodeName 与 这 个 元 素 对 应 的 标签 名 相同 ， 如 div 元 素 返 回 
的 nodeName 属性 就 是 div。 
如 果 节 点 是 属性 节点 ， 返 回 的 nodeName 是 对 应 的 属性 名 。 
如 果 节 点 是 文本 节点 ， 返 回 的 nodeName 是 固定 的 ， 为 #text。 


从 如 图 13-13 所 示 的 演示 中 可 以 看 出 ， 元 素 节点 返回 的 nodeName 是 大 写字 母 形 式 的 。 


var content = document.getElementById("main") 

var p = document.getElementById("main").childNodes [1] 
undefined 

content.nodeName 

"prv" 





p. nodeName 
"pu 


p. childNodes [0] ,nodeName 
"#text" 








图 13-13 
13.4 DOM 事件 


当 页 面 展 现 给 用 户 时 ， 用 户 会 在 页 面 中 进行 操作 ， 这 就 产生 了 交互 。 但 是 ， 如 何 才 能 知道 用 
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户 做 了 什么 呢 ? DOM 事件 可 以 帮助 开发 者 获取 用 户 的 操作 ， 从 而 根据 用 户 的 操作 执行 对 应 的 函 
数 ， 完 成 交互 。 

DOM 事件 可 以 对 HTML 中 的 元 素 进 行 绑 定 ， 绑 定 的 方法 很 简单 ， 在 获取 了 目标 元 素 后 ， 添 
加 DOM 事件 对 应 的 事件 句柄 就 可 以 了 。DOM 事件 中 的 事件 句柄 都 是 on 开头 的 ， 后 面 接着 对 应 的 
动作 。onclick 对 应 的 就 是 DOM 事件 中 的 单 击 事件 句柄 ， 如 果 为 某 个 元 素 绑 定 onclick 事件 ， 只 要 
如 下 调用 即 可 : 


element.onclick: function0 {} 


其 中 ，function 后 就 是 当 开 发 者 绑 定 的 元 素 被 用 户 单 击 后 要 执行 的 操作 。 下 面 对 DOM 中 的 常 
用 事件 进行 介绍 。 


13.4.1 鼠标 单 击 事件 onclick 


onclick 事件 当 鼠 标 单 击 时 触发 。 这 里 需要 注意 的 是 ,在 开发 移动 Web 应 用 时 , 不 要 使 用 onclick 
句柄 ， 因 为 用 户 在 使 用 移动 端 Web 时 ， 手 指 触 碰 屏 幕 单 击 的 事件 并 不 会 触发 click 事件 。 
下 面 的 例子 中 ， 使 用 鼠标 单 击 事件 句柄 制作 一 个 鼠标 单 击 后 生成 动态 交互 的 效果 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
#main{ 
width: 300px; 
height: 150px; 
background: green; 
text-align: center; 
line-height: 150px; 
color: white; 
} 
</style> 
</head> 
<body> 
<div id="main'"> 鼠 标 单 击 触发 单 击 事件 </div> 
<script type="text/javascript"> 
var main = document.getElementById("main"); 
main.onclick = function()í 
main.innerHTML = " 单 击 成 功 "; 
J 
</scrip> 
</body> 
</html> 
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在 上 面 的 代码 中 ， 当 单 击 目标 元 素 后 ， 元 素 的 内 部 文字 会 发 生变 化 。 
13.42 ”表单 改变 事件 onchange() 


onchange0 事 件 专门 用 于 表单 的 输入 框 ， 每 当 输 入 框 内 容 改变 时 ， 就 会 触发 onchange) Ft. 
这 里 的 改变 可 能 是 用 户 输入 内 容 或 者 删除 内 容 。 
需要 注意 的 是 ， 用 户 在 表单 中 输入 内 容 的 过 程 中 ，onchange 事件 句 顶 并 不 会 被 触发 ， 此 时 表 
单 输入 框 处 于 获取 焦点 的 状态 。 当 用 户 输入 结束 ， 单 击 其 他 区 域 ， 使 得 表单 失去 焦点 时 ，onchange 
事件 句柄 才 会 触发 。 
下 面 制作 一 个 例子 ， 在 一 个 空白 区 域 同步 显示 用 户 输 入 的 内 容 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
#input{ 
width: 300px; 
height: 150px; 
background: green; 
text-align: center; 
line-height: 150px; 
color: white; 
margin-top: 20px; 
} 
#user{ 
width: 150px; 
height: 40px; 
; 
</style> 
</head> 
<body> 
<input type="text" id="user" /> 
<div id="input"></div> 
<script type="text/javascript"> 
var input = document.getElementByld("input"); 
var user = document.getElementByld("user"); 
user.onchange = function()í 











input.innerHTML = user.value; 
1, 
</script> 
</body> 
</html> 
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13.43 ”完成 加 载 事 件 onload 


onload 事件 句柄 当 页 面 加 载 完成 时 触发 ， 最 常用 的 window.onload 表示 页 面 加 载 完 毕 后 执行 ， 
这 里 要 注意 页 面 加 载 完 成 指 的 是 什么 。 这 里 的 页 面 加 载 完成 包括 页 面 中 的 HTML、CSS、JavaScript 
加 载 结束 ， 还 包括 图 片 、 视 频 等 其 他 资源 也 加 载 结束 。 
下 面 的 例子 使 用 onload 事件 在 网 页 加 载 完 成 后 更 新 元 素 的 样式 和 文字 内 容 。 
【示例 】 

<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
#main{ 

width: 300px; 

height: 150px; 

background: green; 

text-align: center; 

line-height: 150px; 

color: white; 
J 
</style> 
</head> 
<body> 

<div id="main"> 正 在 加 载 <div> 

<script type="text/javascript"> 

window.onload = function() í 
var main = document.getElementByld("main"); 
main.innerHTML = "加 载 完成 "; 

</script> 
</body> 
</html> 


除了 上 面 介 绍 的 事件 之 外 ，JavaScript 中 提供 的 基本 事件 还 包括 鼠标 移入 移出 的 事件 
onmouseover, onmouseout 以 及 输入 字段 获取 焦点 相关 的 事件 onfocus 等 。 这 些 事件 句柄 的 使 用 和 
上 面 介绍 的 用 法 相同 ， 这 里 不 再 袭 述 。 需 要 注意 的 是 ， 并 不 是 所 有 事件 在 移动 端 Web 应 用 中 都 会 
有 效果 ， 例 如 鼠标 的 相关 事件 。 





行 开 
者 使 


JavaScript 对 象 


本 章 内 容 要 点 : 

#* 数组 对 象 

* 字符 串 对 象 

%* 日 期 对 象 的 使 用 

之 前 已 经 介绍 过 JavaScript 中 的 对 象 ， 对 象 有 许多 属性 和 方法 ， 使 用 对 象 可 以 方便 和 高 效 地 进 
发 。JavaScript 为 开发 者 封装 好 了 一 些 对 象 ， 这 些 对 象 都 有 内 置 的 属性 和 方法 ， 可 以 方便 开发 
用 。 熟 练 掌握 这 些 对 象 的 使 用 ， 可 以 大 大 降低 开发 成 本 ， 同 时 可 以 让 开发 更 灵活 。 








14.1 数 组 


在 JavaScript 中 ，Array 是 数组 对 象 ， 如 果 想 定义 一 个 数组 ， 可 以 使 用 如 下 语句 : 
Var a = new Array(); 

这 样 就 定义 了 一 个 空 的 数组 对 象 。 要 想 为 数组 a 添加 元 素 ， 可 以 使 用 如 下 代码 : 
a= [12]; 


这 样 数组 a 就 包含 1. 2. 3 三 个 数字 了 。 其 实 ， 也 可 以 不 使 用 new Array0， 直 接 使 用 0] 定义 


数组 : 


var b = [1,2,3]; 


250 


| HTML5+jQuery Mobile 移动 应 用 开发 





用 的 : 


在 JavaScript 中 ， 一 个 数组 中 可 以 包含 不 同类 型 的 变量 。 例 如 ， 下 面 的 数组 也 是 可 以 正常 使 


var c = [1, "test"]; 


如 果 想 访问 数组 中 的 元 素 ， 可 以 使 用 索引 ， 索 引 值 从 0 开始 ， 例 如 ，b[0] 返 回 的 元 素 就 是 1, 








c[1] 返 回 的 元 素 就 是 "test"。 
14.1.1 Array 对 象 的 属性 


Array 对 象 常用 的 属性 是 length, 返回 一 个 数组 的 长 度 ， 即 某 个 数组 中 包含 多 少 个 元 素 。 例 如 : 


var a= [1,2,3]; 
console.log(a.length); /| 返回 3 


length 属性 在 使 用 for 循环 对 数组 进行 遍历 时 非常 常用 ， 开 发 者 在 遍历 一 个 数组 时 ， 经 常 需要 


先 获取 到 数组 的 长 度 ， 例 如 ， 


var a = [1,2,3,4,5]; 
for(var i = 0; i < a.length; i ++){ 
console.log(a); 


} 


14.1.2 Array 对 象 的 方法 


Array 对 象 提供 了 丰富 的 方法 供 开发 者 使 用 ， 这 些 方法 可 以 进行 许多 数组 相关 的 操作 。 
1. concat 方法 

concat 方法 用 来 连接 两 个 或 者 多 个 数组 ， 下 面 的 例子 中 列举 了 多 种 使 用 该 方法 的 示例 。 
(1) 连接 两 个 数组 

var arrayl = [1,2,3]; 

var array2 = [5,6,7]; 

var newArray = array l.concat(array2); 

该 例子 中 ， 最 终 返 回 的 newArray 结果 为 [1,2,3,5,6,7]。 
(2 ) 连接 多 个 数组 

var arrayl = [1,2]; 

var array2 = [3,4]; 

var array3 = [5,6]; 


var newArray = array l.concat(array2, array3); 


该 例子 中 ， 最 终 返回 的 newArray 结果 为 [1,2,3,4,5,6]。concat 可 以 连接 任意 多 个 数组 ， 只 要 作 








为 concat 方法 的 参数 依次 传 入 即 可 。 
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(3 ) 连接 数组 和 具体 数值 

var a = 2; 

var array1 = [4,5,6]; 

var newArray = array l.concat(a); 

该 例子 中 最 终 返 回 的 结果 为 [4,5,6,1]， 这 是 使 用 concat 方法 将 数组 与 具体 的 数值 进行 拼接 的 
结果 。 

concat() 方 法 的 参数 可 以 传 入 任意 多 个 数组 或 者 具体 值 ， 最 终 会 把 这 些 参 数 拼接 成 一 个 数组 。 
concat() 方 法 会 将 拼接 后 的 数组 返回 ， 但 是 不 会 改变 调用 该 方法 的 数组 。 

2. join() 方 法 

join() 方 法 可 以 将 一 个 数组 中 的 所 有 元 素 拼 接 成 一 个 字符 串 。 默 认 情 况 下 ， 数 组 中 的 每 个 字符 
是 通过 “,” 进 行 分 割 的 ， 如 下 面 的 例子 : 

var a = [1,2,3] 

ajoin) 

最 终 返 回 的 字符 串 是 “1,23”。 

join 可 以 指定 一 个 参数 ， 用 来 设 定 拼接 数组 中 元 素 的 分 隔 符 ， 例 如 : 

var b = [1,2,3,4,5]; 

b.join("&") 

最 终 返 回 的 结果 为 1&2&3&4&5。 

3. pop() 方 法 和 push() 方 法 


pop() 方 法 和 push() 方 法 是 数组 跟 栈 相关 的 操作 。pop() 方 法 可 以 删除 一 个 数组 中 最 后 一 个 元 素 ， 
而 push0 方 法 可 以 向 数组 的 末尾 添加 元 素 。 

当 使 用 pop0 方 法 时 , 数组 中 末尾 的 一 个 元 素 会 被 删除 ， 并 且 会 返回 这 个 被 删除 的 元 素 , 例如 : 

var a = [1,2,3,4,5]; 

var deleteEl = a.pop(); 

在 执行 完 上 面 的 代码 之 后 , 数组 a 的 内 容 变 为 [1,2,3,4]， 并 且 deleteEl 的 值 为 5， 因 为 这 个 值 是 
pop() 方 法 的 返回 值 ， 也 就 是 数组 中 的 最 后 一 个 元 素 。 

如 果 继 续 上 面 的 代码 执行 apop0， 那 么 数组 a 就 变 为 [1,2,3]， 每 次 调用 数组 的 pop0 方 法 都 会 
删除 数组 中 的 最 后 一 个 元 素 。 

与 之 对 应 的 ，push() 方 法 可 以 向 一 个 数组 的 末尾 添加 元 素 ，push() 方 法 的 返回 值 是 添加 元 素 后 
的 新 数组 长 度 〈 新 数组 的 length 属性 值 ) ， 如 : 

var m = [1,2,3,4,5]; 

var newLength = m.push(6,7,8); 

原来 的 数组 m 值 变 为 [1,2.3,4,5.6,7,8]， 并 且 newLength 的 值 为 8， 因为 它 的 值 是 改变 后 的 数组 
的 长 度 。 
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4. shift() 方 法 和 unshift() 方 法 

shift0) 方 法 和 unshift() 方 法 是 数组 跟 队 列 相关 的 操作 。 与 pop0 方 法 和 push() 方 法 相对 应 的 , shift() 
方法 和 unshifi0 方 法 对 数组 中 头 部 的 元 素 进行 操作 。 

shift0 方 法 会 删除 数组 中 的 第 一 个 元 素 ， 并 且 返 回 值 为 被 删除 的 第 一 个 元 素 : 


var a = [1,2,3,4,5]; 
var deleteEl = a.shift(); 


执行 完 一 次 shift() 方 法 后 ，a 数组 变 为 [2,3,4,5]， 并 且 deleteEl 变量 的 值 为 删除 的 元 素 1。 
unshift() 方 法 用 来 向 数组 的 开头 添加 元 素 ， 并 返回 新 数组 的 长 度 。 


var a = [1,2,3]; 
var newLength = a.unshift(4,5,6); 


执行 unshift() 方 法 后 ，a 数 组 变 为 [1,2,3,4,5,6]， 并 且 newLength 变 量 为 修改 后 的 a 数组 的 长 度 6。 
5. reverse() 方 法 


reverse() 方 法 可 以 颠倒 数组 中 的 元 素 ， 例 如 : 
var a = [1,2,3,4,5]; 


a.reverse(); 

执行 上 面 的 代码 后 ， 数 组 a 变 为 [5,4,3,2,1]。reverse() 方 法 直接 改变 原来 的 数组 ， 而 不 会 产生 一 
个 新 的 数组 。 

6. slice() 方 法 


slice() 方 法 用 来 从 数组 中 返回 一 个 片段 。slice0 方 法 传递 两 个 参数 ， 第 一 个 参数 表示 想 要 获取 
片段 的 开始 位 置 的 索引 ， 第 二 个 参数 表示 想 要 获取 片段 的 结束 位 置 的 索引 。 例 如 : 

var a = [1,2,3,4,5]; 

var aNew = a.slice(1,3); 

上 面 的 代码 返回 的 结果 为 [2.3]。 数 组 是 这 样 切割 的 ， 从 索引 为 1 的 位 置 开始 (元 素 2) ， 到 索 
引 为 3 的 元 素 位 置 之 前 的 那个 元 素 为 止 〈 元 素 3) 。 

slice() 方 法 的 第 二 个 参数 也 可 以 不 指定 ， 不 指定 第 二 个 参数 就 表示 元 素 一 直 截 取 到 原 数组 的 最 
后 一 个 元 素 : 

var b = [1,2,3,4,5,6,7]; 

var bNew = b.slice(2); 

bNew 数组 为 [3,4,5,6,7]。 

slice() 方 法 不 改变 原 数 组 ， 这 个 方法 会 返回 被 截取 的 数组 部 分 的 新 数组 。 


7. splice() 方 法 


splice0 方 法 相对 复杂 ， 参 数 种 类 很 多 ， 通 过 指定 不 同 的 参数 ， 可 以 实现 数组 中 特定 位 置 元 素 
的 删除 、 添 加 等 操作 。 
首先 ， 介 绍 使 用 splice() 方 法 删除 数组 中 元 素 的 方法 。splice0 删 除数 组 中 的 元 素 需 要 传递 两 个 
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参数 ， 第 一 个 参数 是 要 删除 元 素 的 起 始 位 置 索引 ， 第 二 个 参数 是 要 删除 多 少 个 元 素 。 
例如 ,一 个 数组 为 [1,2,3,4,5,6]， 如果 想 删 除数 组 中 3、4、5 这 三 个 元 素 ，3 为 起 始 位 置 的 元 素 ， 
则 需要 传 入 的 索引 值 为 2， 要 删除 三 个 元 素 ， 则 第 二 个 参数 为 3。 因此， 实现 上 面 功能 的 代码 为 : 
var a= [1,2,3,4,5,6]; 
a.splice(2,3); 


经 过 上 面 的 代码 ， 数 组 a 变 成 了 [1,2,6]。splice() 方 法 直接 在 原 数组 中 进行 修改 ， 而 不 会 返回 新 
的 数组 。 

其 次 ，splice() 方 法 还 可 以 为 数组 中 添加 元 素 。 如 果 想 为 数组 添加 元 素 ， 第 一 个 参数 仍然 要 指 
定 为 要 添加 元 素 的 位 置 的 索引 ， 第 二 个 参数 指定 为 0， 表示 不 删除 元 素 。 从 第 三 个 参数 开始 ， 就 可 
以 指定 想 要 添加 的 元 素 了 ， 第 三 个 参数 开始 指定 的 所 有 参数 都 会 按照 顺序 添加 到 原 数 组 中 。 

var a = [1,2,3,4,5,6]; 

a.splice(2,0,8,9); 


上 面 的 代码 中 ， 将 数组 a 修改 成 了 [1, 2, 8, 9, 3, 4, 5, 6]， 因 为 上 面 的 代码 从 第 二 个 元 素 开始 ， 
不 删除 元 素 ， 添 加 8 和 9 两 个 元 素 ， 从 而 组 成 了 新 的 数组 。 

最 后 ，splice() 方 法 还 可 以 通过 同时 指定 这 些 参数 来 实现 类 似 于 数组 中 元 素 替 代 的 功能 。 

var personName = ["Martin", "Tom", "Alice", "Alex", "Mary"]; 

personName.splice(3, 1, "John"); 





执行 上 述 代码 后 的 personName 数组 内 容 为 : ["Martin", "Tom", "Alice", "John", "Mary"]。 这 是 因 
为 在 这 段 代码 中 ， 开 发 者 使 用 splice0 方 法 首先 删除 了 Alex， 然 后 又 添加 了 一 个 元 素 John, 

splice() 方 法 的 返回 值 是 被 删除 的 元 素 所 组 成 的 数组 ， 如 果 没 有 被 删除 的 元 素 就 会 返回 一 个 空 数 
组 。splice() 方 法 非常 灵活 ， 利 用 splice() 方 法 操纵 数组 可 以 实现 许多 开发 者 想得到 的 功能 。 

8. sort() 方 法 


sort() 方 法 可 以 对 函数 进行 排序 ， 它 可 以 传 入 一 个 函数 作为 参数 ， 这 个 函数 的 作用 是 指定 元 素 
排序 的 规则 。 如 果 不 传 入 排序 函数 ，sort() 方 法 就 会 使 用 默认 的 字典 顺序 进行 排序 。 
sort() 方 法 会 改变 原来 的 数组 ， 而 不 会 将 排序 后 的 数组 返回 为 一 个 新 的 数组 。 例 如 : 


var a = [2,3,1,9,6,7]; 








a.sort() 
上 面 的 代码 中 ，a 数组 变 为 [1,2,3,6,7,9]， 这 是 按照 默认 的 字典 顺序 进行 排序 的 。 如 果 想 自己 指 
定 一 个 排序 顺序 ， 就 可 以 编写 一 个 函数 ， 例 如 : 
function sortNumber(a,b){ 
return a - b 
} 


当 将 这 个 函数 传递 到 sort( 方 法 中 时 ，sort() 方 法 会 将 两 个 数 带 入 这 个 方法 中 ， 由 返回 值 大 于 0 
还 是 小 于 0 来 决定 元 素 的 排列 顺序 。 因 此 , 使 用 自己 定义 的 函数 作为 排序 函数 时 ， 函 数 必须 能 够 返 
回 反 映 元 素 相对 大 小 的 数值 ， 这 是 sort() 方 法 的 排序 依据 。 
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sort() 方 法 的 这 种 传 入 函数 作为 参数 的 形势 叫 作 高 阶 函 数 。 
14.1.3 ”数组 遍历 

数组 的 第 一 种 遍历 方法 在 上 面 已 经 介绍 过 : 

var a=[1,2,3,4,5]; 

for(var i = 0; i < a.length; i ++){ 

console.log(a[i]); 

} 

另 一 种 遍历 数组 的 方式 是 使 用 for..in.… 进 行 遍历 : 

var personName = ["Martin", "Tom", "Mike", "Alex", "Mary"]; 

for (name in personName)í 


console.log(personName[name]); 


} 
14.2 ”字符 串 对 象 


String 是 字符 串 对 象 ， 字 符 串 对 象 可 能 是 最 常 使 用 的 一 种 结构 了 。 定 义 一 个 字符 串 很 简单 : 

var txt = "Hello"; 

像 上 面 那样 ， 使 用 双 引 号 或 者 单 引号 就 定义 了 一 个 字符 串 ， 每 一 个 字符 串 都 继承 了 String 对 
象 的 属性 和 方法 。 

字符 串 可 以 进行 加 运算 ， 参 与 加 运算 的 字符 串 会 进行 拼接 。 例 如 : 

var sl = "aaa"; 

var s2 = "bbb"; 

s3=sl +S2; 

执行 上 面 的 代码 后 ，s3 也 成 为 一 个 字符 串 ， 是 由 sl 和 s2 字符 串 拼接 而 成 的 新 字符 串 ， 其 值 
为 "aaabbb"。 


14.24 String 对象 的 属性 


和 Array 对 象 一 样 ，String 对 象 常用 的 一 个 属性 也 是 length 属性 。length 属性 可 以 返回 字符 串 
的 长 度 ， 例 如 : 

var txt = "Hi, Martin"; 

console.log(txt.length); 

打印 出 来 的 字符 串 长 度 为 10， 不 仅 每 一 个 字母 ， 每 一 个 空格 、 符 号 也 会 占用 一 个 长 度 。 

利用 字符 串 的 length 属性 可 以 进行 一 些 表单 检测 。 例如, 要 求 用 户 输入 的 密码 不 得 少 于 10 位 ， 
在 用 户 输入 完 密码 后 ， 可 以 使 用 获取 到 的 用 户 输入 的 字符 串 的 length 属性 判断 长 度 是 否 符合 要 求 。 
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14.22 String 对象 的 方法 


String 对 象 有 许多 方法 ， 其 中 一 些 方法 和 字符 串 的 样式 相关 ， 并 不 常用 ， 这 里 不 做 介绍 。 下 面 


要 介绍 的 String 对 象 的 方法 是 JavaScript 中 和 字符 串 对 象 相 关 的 非常 常用 的 方法 。 


符 


1. concat() 方 法 


String 对 象 也 有 concat() 方 法 ， 这 个 方法 和 Array 对 象 中 的 concat() 方 法 类 似 ， 用 来 进行 两 个 字 
串 的 拼接 。concat() 方 法 的 作用 和 字符 串 中 的 “+” 运 算 效 果 是 相同 的 。 

例如 ， 下 面 的 代码 将 三 个 字符 串 进行 拼接 : 

Var sl = "aaa"; 

var s2 = "bbb"; 

Var s3 = "ccc"; 

var s4 = sl.concat(s2, s3); 


s4 字符 串 即 为 “aaabbbccc”。 





2. indexOf() 方 法 
indexOf) 方 法 返回 某 个 指定 的 字符 串 值 在 字符 串 中 首次 出 现 的 位 置 ， 比 如 ， 有 一 个 字符 串 内 


容 如 下 : 


"I love programming" 


那么 ， 现 在 需要 查找 出 “love” 这 个 字符 串 在 上 面 的 字符 串 中 是 否 存 在 以 及 存在 的 位 置 ， 就 需 


要 使 用 indexOf() 方 法 来 实现 。 如 果 一 个 子 字符 串 确 实 存在 于 父 字 符 串 当中 ， 就 返回 这 个 子 字符 串 


最 





开始 出 现在 父 字符 串 中 的 头 位 置 ， 如 : 


var txt = "ABCDEFG"; 
var search = "BC"; 
txt.indexOf(search); 


上 面 的 代码 返回 值 为 1， 因 为 BC 这 个 字符 串 最 开始 出 现 的 位 置 在 txt 字符 串 的 索引 值 为 1。 
如 果 父 字 符 串 中 不 包含 子 字符 串 ， 就 会 返回 -1。 这 个 方法 非常 有 用 ， 当 需要 鉴别 一 个 字符 串 中 





是 否 包 含 某 一 个 子 字符 串 时 使 用 indexOf) 方 法 ， 如 果 返 回 值 为 -1， 就 表明 不 存在 子 字符 串 。 例 如 ， 
当 需 要 鉴别 用 户 发 言 是 否 包含 敏感 词汇 时 ， 就 可 以 使 用 这 个 方法 。 


indexOfOD) 还 可 以 传 入 多 个 参数 ， 表 示 开 始 查询 的 父 字符 串 的 位 置 ， 默 认 情 况 下 会 从 父 字符 串 


的 头 部 〈 索 引 值 为 0 的 位 置 ) 开始 查找 。 


var text = "AABBCCDDAA"; 
var search = "AA"; 

var rl = text.indexOf(search); 
var r2 = text.indexOf(search, 3); 


上 面 的 代码 中 ，rl 返回 的 结果 是 0， 因 为 从 头 开始 搜索 ，“AA” 字 符 串 第 一 次 出 现 的 位 置 索 


引 值 为 0。 在 r2 中 ， 指 定 了 搜索 的 起 始 位 置 为 3， 因此 只 能 检索 到 最 后 一 个 “AA” 字 符 串 ， 因 此 
返回 值 为 8。 
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此 外 , 字符 串 对象 还 有 lastIndexOf) 方 法 ， 这 个 方法 和 indexOft) 方 法 类 似 , 但 是 会 从 后 向 前 搜 
索 字 符 串 。 

3. slice() 方 法 

字符 串 中 的 slice() 方 法 和 数组 中 的 slice() 方 法 类 似 ， 都 用 于 从 字符 串 中 截取 某 一 段 字符 串 。 
slice() 方 法 传 入 两 个 参数 ， 分 别 规定 了 截取 字符 串 的 起 始 位 置 索引 和 结束 位 置 索引 。 

var str = "AABBCCDDEE"; 

var substr = str.slice(2, 5); 

从 上 面 的 代码 中 得 到 的 substr 字符 串 为 “BBC”， 是 str 字符 串 从 第 三 个 字母 到 第 六 个 字母 之 
间 截 取出 来 的 片段 。 

4. split() 方 法 

字符 串 中 的 split() 方 法 和 数组 中 的 join0 方 法 是 一 对 互 逆 的 操作 ， 回 想 数 组 中 的 join() 方 法 ， 可 
以 将 数组 中 的 元 素 组 成 为 一 个 字符 串 。split0 方 法 的 作用 是 分 割 一 个 字符 串 ， 并 将 分 割 的 元 素 返 [E 
成 一 个 数组 。 

split() 方 法 的 第 一 个 参数 指定 一 个 字符 串 ， 表 示 原 字符 串 将 以 参数 指定 的 字符 串 为 分 割 处 进行 
分 割 。 下 面 的 例子 将 演示 split0 方 法 的 使 用 。 

(1) 使 用 split0 方 法 将 单词 分 割 成 字母 : 


Var word = "horse"; 
var wordArray = word.split(""); 




















最 终 ，wordArray 变量 的 值 为 一 个 字符 串 数组 : ["h", "o", "r", "s", "e"]。 在 使 用 split0 方 法 时 ， 
用 一 个 空 的 字符 串 作为 参数 传 入 ， 表 明 每 隔 一 个 字符 就 进行 分 割 。 
(2) 使 用 split() 方 法 将 句子 分 割 成 单词 : 


var sentence = "I love Javascript"; 
var sentenceArray = sentence.split(" "); 


上 面 的 代码 中 ，sentenceArray 返回 值 为 字符 串 数 组 : ["T", "love", "JavaScript"], split 的 参数 为 
空格 字符 串 ， 表 明 原 字符 串 将 在 空格 的 位 置 进行 分 割 。 
G) 使 用 split0 方 法 分 割 URL 参数 : 


var urlParams = "username=Martin&email=test@qq.com&tel=123456"; 
var urlParamsArray = urlParams.split(&); 





urlParamsArray 返回 值 为 ["usemame=Martin", "email=test@qq.com", "tel=123456"]。 这 次 将 & 作 
为 分 隔 符 ， 分 割 出 了 URL 的 每 一 组 参数 。 

上 面 的 代码 还 可 以 继续 分 割 ， 将 每 一 段 URL 的 参数 分 割 成 键 值 对 : 

var urlParams = "username=Martin&email=test(@qq.com&tel=123456"; 

var urlParamsArray = urlParams.split("&"); 

var userData = new Object(); 


第 14 章 JavaScript 对 象 | 257 





for(var i = 0; i < urlParamsArray.length; i ++)í 
var temp = urlParams Array[i].split("="); 
userData[temp[0]] = temp[1]; 

} 


console.log(userData); 
上 面 的 代码 最 终 会 返回 如 下 对 象 : 
{ 
username: "Martin", 
email: "test@qq.com", 
tel: "123456" 
} 
这 是 非常 常用 的 功能 ， 将 URL 传递 的 参数 转换 成 一 个 对 象 ， 只 需要 使 用 之 前 介绍 过 的 数组 的 
遍历 以 及 split() 方 法 ， 就 可 以 轻松 完成 这 个 功能 。 
5. 其 他 方法 


(1) substr() 方 法 
substr() 方 法 的 作用 和 slice() 方 法 类 似 ， 用 来 截取 一 段 字符 串 ， 只 不 过 ，substr() 方 法 传 入 的 第 一 
个 参数 是 要 截取 位 置 的 索引 ， 第 二 个 参数 是 要 截取 字符 串 的 长 度 。 
var txt = "AABBCC"; 
var subtext = txt.substr(1, 3); 
上 面 代 码 的 含义 是 ， 从 字符 串 txt 中 截取 从 第 二 个 字母 开始 长 度 为 3 的 字符 串 ， 其 结果 为 
“ABB”。 
(2) toLowerCase() 方 法 和 toUpperCase() 方 法 
toLowerCase() 方 法 和 toUpperCase() 方 法 用 来 将 一 段 字 符 串 中 的 字符 全 部 转换 为 小 写 或 者 全 部 
转换 为 大 写 。toLowerCase() 方 法 和 toUpperCase() 方 法 不 会 改变 原来 的 字符 串 ， 而 是 返回 一 个 经 过 
大 小 写 转换 的 新 的 字符 串 。 
var lower = "aabbccddee"; 
upper = lower.toUpperCase(); 


Be, upper 字符 串 的 返回 值 为 “AABBCCDDEE”, 而 lower 字符 串 的 值 仍 为 “aabbccddee”。 





14.3 H 期 


基本 上 每 一 个 项 目的 开发 都 会 涉及 日 期 ， 日 期 对 象 是 使 用 最 频繁 的 JavaScript 对 象 之 一 ， 日 期 
对 象 是 Date0)， 提 供 了 丰富 的 方法 来 表示 时 间 。 
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14.3.1 初始 化 一 个 日 期 
要 想 初始 化 一 个 日 期 ， 只 要 使 用 new 关键 字 就 可 以 了 : 


var now = new Date(); 





上 面 的 代码 中 ，now 的 值 为 Wed Feb 15 2017 16:03:52 GMT+0800 (CST)， 这 个 返回 的 是 当前 的 
GMT 时 间 。 注 意 ， 这 不 是 一 个 字符 串 ， 而 是 一 个 Date0 对 象 ， 虽 然 它 现在 是 GMT 格式 的 时 间 ， 但 
是 可 以 使 用 Date0 对 象 提供 的 各 种 方法 对 这 个 时 间 对 和 象 进行 操作 ， 获 取 到 想 要 的 时 间 。 


14.3.2 ”获取 日 期 参数 
Date() 对 象 中 提供 了 丰富 的 时 间 参 数 获取 方法 , 利用 这 些 方 法 可 以 获取 一 个 时 间 对 象 的 年 、 月 、 
1. getFullYear() 方 法 


getFullYear() 方 法 可 以 从 调用 它 的 Date0 对 象 中 返回 对 应 的 年 ， 利 用 下 面 的 代码 可 以 获取 当前 
日 期 的 年 份 : 


var now = new Date(); 
var year = now.getFullYear(); 


返回 当前 年 份 。 
2. getMonth() 方 法 
getMonth() 方 法 用 来 返回 日 期 对 象 对 应 的 月 份 ， 但 是 返回 值 的 月 份 和 实际 的 月 份 数 之 间 差 1。 


例如 ， 如 果 当 前 日 期 对 应 的 是 2 月 ， 那 么 getMonth() 方 法 返回 的 数值 是 1。getMonth() 方 法 返回 的 
月 份 数 为 0 到 11。 


Var now = new Date(); 
var month = now.getMonth() + 1; 


month 最 后 的 返回 结果 要 加 1 才能 得 到 正常 的 月 份 值 。 
3. getDate() 方 法 


getDate() 用 于 输出 “年 /月 /日 ”中 的 “日 ”。getDate() 的 输出 结果 可 能 是 1 一 31 中 的 任何 一 个 
数值 ， 表 示 日 期 对 象 时 间 对 应 的 天 。 


Var now = new Date(); 
var date = now.getDate(); 


使 用 上 面 的 三 个 Date() 方 法 ， 可 以 将 日 期 对 象 拼接 成 “年 /月 /日 ”的 形式 。 











Var now = new Date(); 

var year = now.getFullYear(); 

var month = now.getMonth() + 1; 
var date = now.getDate(); 
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var time = year + "/" + month + "/" + date; 
4. 返回 和 时 间 相 关 的 方法 


Date0 对 象 提供 了 三 个 方法 ， 分 别 用 来 返回 当前 日 期 对 象 对 应 的 时 、 分 、 秘 。 

getHours() 方 法 获取 当前 日 期 对 象 对 应 的 小 时 数 ; getMinutes0 方 法 获取 当前 日 期 对 象 对 应 的 分 
钟 数 ，getSeconds() 方 法 获取 当前 日 期 对 象 对 应 的 秒 数 。 

下 面 利用 这 三 个 方法 拼接 出 一 个 “时 : 分 : 秒 ”字符 串 。 

var now = new Date(); 

var hour = now.getHours(); 

var minute = now.getMinutes(); 

var second = now.getSecond(); 

var time = hour + ":" + minute + ":" + second; 


5. getTime() 方 法 
getTime0) 方 法 可 以 返回 某 个 日 期 对 象 距离 1970 年 1 月 1 日 的 毫秒 数 ， 例 如 : 


var now = new Date(); 
var time = now.getTime(); 


time 的 值 就 是 当前 时 间 到 1970 年 1 月 1 日 之 间 的 毫秒 数 。 

这 个 方法 可 以 做 什么 呢 ? 其 实 这 个 方法 是 非常 有 用 的 ， 返 回 某 个 日 期 距离 1970 年 1 月 1 日 之 
间 的 毫秒 数 ， 实 际 上 提供 了 开发 专利 号 一 个 衡量 时 间 的 绝对 数值 。 利 用 这 个 绝对 数值 ， 可 以 计算 出 
一 些 其 他 开发 者 需要 的 值 。 

例如 ， 通 过 JavaScript 比较 两 个 时 间 对 象 之 间 的 大 小 ， 就 可 以 使 用 getTime() 方 法 实现 : 

var timel = date1.getTime(); 

var time2 = date2.getTime(); 

var s = timel - time2; 


上 面 的 例子 中 ， 要 想 比较 两 个 日 期 的 大 小 关系 ， 可 以 将 两 个 日 期 都 先 使 用 getTime() 方 法 转换 
成 毫秒 数 ， 然 后 比较 二 者 之 间 的 大 小 ， 就 可 以 得 出 两 个 日 期 之 间 的 大 小 关系 了 。 

同 理 ， 还 可 以 使 用 这 个 毫秒 数 来 计算 两 个 日 期 之 间 相 差 的 天 数 、 月 数 等 ， 只 要 使 用 一 些 换算 
关系 就 可 以 实现 了 。 

6. 日 期 的 初始 化 
回顾 一 下 ， 当 开发 者 想 生成 一 个 当前 时 间 的 时 间 对 象 时 ， 可 以 使 用 如 下 代码 : 

var now = new Date(); 

now 变量 返回 的 就 是 当前 时 间 对 应 的 日 期 对 象 ， 为 GMT 格式。 

但 是 ， 能 否 将 其 他 格式 的 时 间 初 始 化 为 一 个 日 期 对 象 呢 ? 例如 ， 用 户 输入 了 “2016-11-12” 这 
样 的 日 期 字符 串 ， 为 了 接 下 来 的 操作 ， 如 何 将 它 转换 成 一 个 日 期 对 象 呢 ? 

其 实 ， 使 用 Date() 方 法 为 其 传 入 一 些 参数 ， 就 可 以 实现 特定 日 期 对 象 的 初始 化 。Date() 方 法 可 
以 传 入 如 下 类 型 的 值 ， 实 现 日 期 的 初始 化 。 
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(1) 传 入 字符 串 
Date() 方 法 可 以 直接 传 入 字符 串 , 实现 目标 日 期 的 初始 化 。 例如 , 如 果 想 将 字符 串 “2016-11-12” 
这 个 日 期 初始 化 成 日 期 对 象 ， 可 以 进行 如 下 操作 : 


var time = new Date("2016-11-12"); 

此 外 ， 还 可 以 使 用 西方 表达 时 间 的 顺序 初始 化 日 期 ， 例 如 : 

var time = new Date("11-12-2016"); 

上 面 的 代码 和 之 前 的 效果 是 相同 的 。 

不 能 随意 颠倒 年 月 日 的 顺序 ， 如 果 年 月 日 顺序 不 符合 规定 ， 就 会 返回 invalid Dates 

除了 “2016-11-12” 这 种 格式 的 字符 串 可 以 被 初始 化 之 外 ,， 类似“2016.11.12 ”或 者 “2016/1112” 
这 样 的 字符 串 都 可 以 正确 地 通过 Date() 方 法 初始 化 为 日 期 对 象 。 其 实 ， 这 个 中 间 的 分 隔 符 使 用 什么 都 
无 所 谓 ， 即 便 是 “2016&11&12” 这 样 的 分 隔 符 ， 也 可 以 成 功 进行 日 期 对 象 的 初始 化 。 需 要 注意 ，“:” 
是 不 能 用 在 这 里 的 ， 因 为 “:” 被 用 来 初始 化 和 时 间 相 关 的 对 象 〈 时 分 秒 ) 。 如 果 字 符 串 中 使 用 了 冒 
号 ，Date() 方 法 就 会 自动 将 其 识别 为 时 间 对 象 进行 初始 化 。 

(2) 传 入 参数 

Date() 方 法 可 以 传 和 年、 月、 日 的 参数 ， 进 行 日 期 的 初始 化 。 例 如 ， 想 初始 化 2016 年 11 月 12 
日 这 个 日 期 ， 可 以 通过 如 下 代码 初始 化 : 

var time = new Date(2016, 10, 12); 


上 面 的 代码 为 Date() 方 法 分 别传 入 年 、 月 、 日 参数 ， 构 成 对 应 的 日 期 。 需要 注意 ， 月 份 参数 在 
传 入 时 要 减 1， 之 前 介绍 过 ，JavaScript 中 的 月 份 是 从 0 月 到 11 月 的 ，11 月 对 应 应 该 传 入 的 参数 
为 10。 

(3) 传 入 毫秒 数 

Date() 方 法 还 可 以 传 入 毫秒 数 来 初始 化 时 间 : 

var now = new Date(); 


var time = now.getTime(); 
var past = new Date(time); 








JavaScript 基本 语法 


在 HTML 代码 中 使 用 JavaScript 
变量 
基本 数据 类 型 
对 象 
函数 
本 章 将 介绍 JavaScript 中 的 基础 语法 ,熟练 掌握 JavaScript 语法 才能 灵活 、 准 确 地 使 用 JavaScript 
实现 Web 开发 的 各 种 功能 。 


* * # k *2 > 


15.4 开始 使 用 JavaScript 


JavaScript 既 可 以 在 HTML 文档 内 部 直接 使 用 ， 也 可 以 在 外 部 定义 单独 的 JavaScript 文件 。 
JavaScript 在 HTML 内 部 使 用 时 ， 可 以 将 JavaScript 代码 放置 在 <scrip 作 标签 之 间 , 表示 内 部 的 
代码 是 JavaScript 代码 ， 请 看 下 面 的 例子 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" > 
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<meta name="viewport" content="width=device-width. initial-scale=1, maximum-scale=1"/> 
</head> 
<body> 

<script type="text/javascript"> 

/Javascript 代码 

</script> 
</body> 
</html> 


使 用 <scrip 人 > 标签 引入 JavaScript 代码 时 , 可 以 放置 在 HTML 代码 中 的 任何 位 置 , 不 同 的 位 置 ， 
JavaScript 代码 对 应 的 执行 顺序 也 有 所 不 同 。 考 虑 下 面 两 种 代码 执行 的 差别 。 


【示例 1】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
</head> 
<body> 
<div id="main"></div> 
<script type="text/javascript"> 
var main = document.getElementById("main"); 
main.innerHTML = "test"; 
</script> 
</body> 
</html> 


【示例 2] 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script type="text/javascript"> 
var main = document.getElementById("main"); 
main.innerHTML = "test"; 
</script> 
</head> 
<body> 
<div id="main"></div> 
</body> 
</html> 


第 一 段 代码 可 以 正常 运行 ， 但 是 第 二 段 代 码 会 出 现 报错 。 这 是 因为 在 这 两 段 代码 中 JavaScript 
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的 位 置 不 同 ， 因 此 执行 顺序 也 有 所 不 同 。 这 段 JavaScript 代码 的 意思 是 ， 获 取 到 设置 了 id 为 main 
的 元 素 并 将 其 HTML 内 容 设 置 为 test。 第 一 段 代码 中 ，JavaScript 代码 放 在 body 末尾 ， 那 么 当 页 面 
DOM 结构 演 染 完毕 之 后 ，JavaScript 代码 才 执 行 ， 因 此 没有 问题 。 在 第 二 段 代码 中 ，JavaScript 代 
人 码 放 在 head 部 分 , 代码 的 执行 顺序 是 先 执 行 JavaScript 代码 再 执行 DOM 的 演 染 。 HAT JavaScript 
代码 时 ，DOM 结构 还 没有 进行 泻 染 ， 因 此 获取 不 到 元 素 ， 从 而 发 生 报错 。 

如 果 将 JavaScript 代码 放 在 头 部 ， 解 决 上 述 问题 的 方法 是 添加 window.onload， 表 示 当 页 面 泻 
染 完毕 后 再 执行 JavaScript 代码 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script type="text/javascript"> 
window.onload = function() í 
var main = document.getElementById("main"); 
main.innerHTML = "test"; 





} 
</script> 
</head> 
<body> 
<div id="main"></div> 
</body> 
</html> 


JavaScript 更 多 的 是 被 定义 在 单独 的 文件 中 使 用 。 在 外 部 使 用 JavaScript 时 ， 需 要 定义 单独 的 
XF, RAH jso ENE JavaScript 文件 后 就 可 以 使 用 <scripf> 标 签 将 外 部 定义 的 JavaScript 文件 
引入 到 HTML 代码 中 。 

比如 ， 定 义 了 一 个 名 为 testjs 的 JavaScript 文件 ， 在 HTML 中 使 用 时 代码 如 下 : 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script type="text/javascript" src="test.js"></script> 
</head> 
<body> 
<div id="main"></div> 
</body> 
</html> 


使 用 script 引入 外 部 JavaScript 代码 时 ,使 用 sre 属性 指定 要 引入 的 JavaScript 文件 的 路 径 ， 路 
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径 指 的 是 被 引入 的 文件 和 引入 文件 之 间 的 目录 关系 。 当 要 引入 的 JavaScript 文件 和 HTML 文件 在 同 
一 目录 下 时 就 使 用 上 面 的 代码 ， 有 具体 的 引入 内 容 根据 相对 路 径 关 系 而 定 。 

一 般 一 个 HTML 文档 中 ， 可 能 需要 引入 多 个 不 同 的 JavaScript 代码 。 引 入 JavaScript 代码 时 ， 
需要 注意 引入 顺序 ， 因 为 不 同 外 部 JavaScript 的 执行 顺序 也 是 根据 引入 顺序 决定 的 。 特 别 是 当 需 要 
引入 一 些 第 三 方 JavaScript 框架 时 ， 第 三 方 代码 一 定 要 在 自己 使 用 第 三 方 代码 编写 的 JavaScript 代 
码 之 后 ， 否 则 无 法 正常 使 用 第 三 方 JavaScript 框架 提供 的 方法 。 

比如 ， 下 面 的 例子 中 使 用 了 两 种 不 同 的 引入 方法 来 引入 自己 编写 的 testjs 文件 和 jQuery 文件 

(一 个 第 三 方 框架 ) ， 其 中 ，testjs 文件 中 使 用 了 jQuery 库 提供 的 一 些 方法 。 

test.js 文件 : 

$("#main").html("TEST"); 

HTML 文件 : 

<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 

<script type="text/javascript" src="test.js"></script> 

</head> 

<body> 

<div id="main"></div> 

</body> 

</html> 

这 种 写法 是 可 以 正常 运行 的 ， 但 是 如 果 颠 倒 两 个 JavaScript 文件 的 引入 顺序 就 会 报错 : 

<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

<script type="text/javascript" src="test.js"></script> 

<script src="http://code .jquery.com/jquery-1.8.0.min.js"></script> 

</head> 

<body> 

<div id="main"></div> 
</body> 

</html> 


报错 内 容 如 下 : 


© > Uncaught ReferenceError: $ is not defined 
at test.js:1 
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显示 jQuery 中 的 $ 方 法 没有 定义 ， 这 是 因为 当 开发 者 自己 的 JavaScript 文件 调用 jQuery 中 的 $ 
方法 时 ，jQuery 文件 还 没有 引入 ， 因 此 会 出 现 这 种 问题 。 

在 开发 过 程 中 ， 一 定 要 注意 外 部 JavaScript 文件 的 引入 顺序 ， 依 赖 于 其 他 JavaScript 文件 的 
JavaScript 文件 要 放 在 后 面 引 入 。 


15.2 变 量 


在 JavaScript 中 ， 使 用 var 来 定义 变量 。 

var a = 3; 

var b = 5; 

var c =a+b; 

可 以 使 用 console.log() 在 控制 台 打 印 出 一 些 变量 的 值 ， 这 个 在 调试 的 过 程 中 经 常 使 用 。 

console.log(c) 

控制 台中 会 打印 出 数字 8。 

JavaScript 中 对 变量 的 大 小 写 是 敏感 的 ， 下 面 定义 的 两 个 变量 是 不 同 的 变量 。 

var test = 5; 

var Test = 10; 

JavaScript 中 的 变量 和 其 他 语言 中 的 变量 有 所 不 同 , JavaScript 中 的 变量 可 以 被 赋 给 任何 值 , 一 
个 变量 既 可 以 是 数字 、 字 符 串 、 数 组 ， 也 可 以 是 函数 。 


15.3 ”基本 数据 类 型 


JavaScript 中 的 变量 包含 多 种 数据 类 型 ， 基 本 的 数据 类 型 有 数字 、 字 符 串 、 布 尔 型 值 、Null 以 
K Undefined. 

@ 数字 类 型 : 如 “vara=20; ”中 a 就 被 赋值 给 了 一 个 数字 类 型 的 变量 。Javascript 中 的 数字 
类 型 在 定义 时 可 以 直接 定义 成 整数 、 小 数 或 者 整数 形式 。 

° 字符 串 类 型 : 字符 串 类 型 的 变量 在 定义 时 使 用 引号 ( 单 引 号 或 双 引 号 ) 进 行 声明 。 例 如 “var 
name = "Martin" ”就 定义 了 一 个 name 变量 ， 它 是 一 个 字符 串 变 量 ， 字 符 串 变量 有 时 会 和 
AFRA, Pdo: 
var test = 22; 
var test = "22"; 

第 一 个 test 是 数字 变量 ， 第 二 个 test 内 容 虽 然 是 数字 ， 但 是 用 引号 引入 ， 其 实 就 是 一 个 字 
符 串 变量 。 有 关 数 字 变 量 和 字符 事变 量 之 间 的 关系 ， 将 在 后 面 的 章节 进行 专门 介绍 。 

° 布尔 类 型 : 布尔 类 型 指 的 是 true 或 者 false， 只 有 这 两 个 可 能 的 取 值 。 定 义 布 尔 类 型 变量 的 

方式 如 下 : 
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var x = true; 
var y = false; 
布尔 类 型 值 一 般 用 于 进行 逻辑 判断 。 

© Undefined 类 型 : Undefined 类 型 表示 一 个 变量 不 含有 任何 值 ， 是 一 个 未 定义 的 变量 。 

© Null 类 型 : Null 类 型 表示 变量 的 值 为 空 ， 经 常 被 用 于 进行 变量 的 初始 化 。 例 如 ， 需 要 定义 
一 个 name XÈ, 但 是 name 变量 的 值 可 能 是 后 台 传 入 的 , 目前 还 不 存在 ,在 声明 时 可 以 使 
用 如 下 代码 : 
var name = null; 


这 样 ， 在 后 面 使 用 name 变量 时 就 不 会 报错 了 。 


如 果 在 代码 中 使 用 的 变量 没有 被 定义 , 那么 程序 会 报错 。 下面 在 Chrome 控制 台中 模拟 调用 为 
定义 变量 的 结果 : 
> console.log(ccc) 


© Uncaught ReferenceError: ccc is not defined 
at <anonymous>:1:13 


JavaScript 中 的 变量 是 动态 变量 ， 当 已 经 将 一 个 变量 赋值 为 数字 类 型 时 ， 如 果 想 修改 它 的 值 ， 
也 可 以 赋值 成 其 他 的 数据 类 型 ， 例 如 : 

var x = 123; 

var x = "Martin"; 


上 面 的 代码 在 JavaScript 中 是 不 会 报错 的 ， 如 果 是 在 Java 中 ， 这 些 代 码 就 会 报错 ， 因 为 x 的 
第 二 次 赋值 改变 了 x 的 数据 类 型 。 


154 基本 语句 


15.4.1 ifelse 语句 
JavaScript 可 以 使 用 if-else 语句 表示 条 件 判断 。 例 如 : 


var a= -10; 
ifa <0){ 
a=-a 
}else{ 
a=a 
} 
上 面 的 代码 使 用 if-else 语句 进行 条 件 判断 ， 如 果 a 小 于 0， 就 执行 a= -a， 和 否则 执行 a= a。 
还 可 以 使 用 多 个 分 支 的 条 件 判 断 语句 ， 即 使 用 else if， 例 如 : 
var m = 30; 
if(m < 18){ 
console.log(" 少 年 ") 
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yelse if(m < 25){ 
console.log(" 青 年 ") 
yelse if(25 < m < 50){ 
console.log(" 中 年 ") 
} 
在 条 件 分 支 语句 中 ， 只 会 执行 一 个 分 支 。 当 从 上 到 下 执行 时 ， 如 果 遇 到 第 一 个 符合 条 件 的 条 
件 分 支 时 就 执行 其 中 的 代码 ， 并 跳出 整个 条 件 分 支 逻辑 。 
var m = 17; 
ifm < 18){ 
console.log(" 少 年 ") 
yelse if(16 < m < 25){ 
console.log(" 青 年 ") 
Jelse if(25 < m < 50){ 
console.log(" 中 年 ") 
; 


上 面 的 例子 中 ，m = 17 符合 条 件 分 支 语句 中 的 前 两 个 判断 ， 但 是 最 后 会 输出 的 是 少年 ， 因 为 
遇 到 第 一 个 符合 条 件 的 判断 后 ， 后 面 的 判断 就 不 会 被 执行 了 。 
15.4.2 ”循环 语句 

在 JavaScript 中 ， 使 用 for 进行 循环 ， 可 以 很 方便 地 进行 重复 性 的 工作 。 例 如 ， 想 在 控制 台 打 
印 10 次 “Hello world”， 可 以 通过 for 循环 实现 : 

for(var i = 0; i < 10;i++){ 


console.log("Hello world"); 


} 
for 循环 经 常会 进行 一 些 数组 的 遍历 、 对 象 的 遍历 等 。 
此 外 ， 还 有 while 循环 。while 循环 在 条 件 语 句 符合 时 一 直 执行 ， 直 到 条 件 不 符合 跳出 循环 。 





var i= 0; 

while(i < 5){ 
console.log" HAT AFA" + i); 
IE 

} 


每 次 循环 都 为 i 值 加 1， 当 i 值 小 于 5 时 就 一 直 执 行 循环 ， 直 到 i 值 不 符合 条 件 跳出 循环 。 
155 A 数 


函数 用 来 定义 一 些 可 以 复 用 的 代码 块 ，JavaScript 中 使 用 function 关键 字 定义 一 个 函数 。 函 数 
有 两 种 定义 方式 : 
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(1) 

function test(){ 

alert("Hello"); 

} 

(2) 

var test = function()í 

alert(" Hello"); 

} 

二 者 都 可 以 定义 一 个 函数 ， 但 也 有 一 些小 的 区 别 。 使 用 第 一 种 方式 声明 的 函数 ， 在 JavaScript 
代码 执行 时 会 自动 提升 到 所 有 JavaScript 代码 的 最 开头 ,而 使 用 第 二 种 方式 定义 的 函数 不 会 有 这 种 
效果 。 

函数 可 以 传 入 参数 作为 变量 ， 下 面 使 用 JavaScript 编写 一 个 简单 的 计算 两 数 和 的 函数 。 

function add(x, y) í 

var result = x + y; 


return result; 


ji 

其 中 ，x 和 y 就 是 函数 中 需要 传 入 的 参数 。 如 果 想 使 用 这 个 add 函数 ， 就 需要 进行 如 下 调用 : 

var sum = add(10, 20); 

上 面 的 sum 值 的 最 终结 果 为 30。 其 中 ，return 语句 在 一 个 函数 中 ， 用 来 返回 结果 。 上 面 的 add 
函数 将 两 数 相 加 的 和 作为 结果 返回 ， 因 此 才 可 以 使 用 sum 变量 来 装载 返回 的 结果 。 

传 入 的 参数 要 和 函数 定义 时 声明 所 需 的 函数 匹配 ， 如 果 传 入 的 参数 多 于 函数 定义 时 声明 所 需 
的 参数 ， 传 入 的 多 余 的 参数 将 会 被 忽略 。 如 果 传 入 的 参数 少 于 函数 定义 时 声明 所 需 的 参数 ， 没 有 被 
传 入 的 参数 的 值 就 为 undefined， 这 可 能 会 导致 函数 中 的 代码 出 现 错误 。 


15.6 对 象 


JavaScript 中 的 对 象 很 常用 ， 一 个 JavaScript 中 的 对 象形 势 如 下 : 


name: "Martin", 
age: 13 
} 


其 中 ， 冒 号 左 侧 的 叫 作 这 个 对 象 的 属性 ， 冒 号 右边 的 叫 作 对 应 属性 的 属性 值 ， 一 个 对 象 包含 
多 对 属性 和 属性 值 。 
要 想 定义 一 个 对 象 ， 可 以 使 用 new ObjectO 进 行 定 义 : 


Var person = new Object() 
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然后 ， 可 以 通过 下 面 这 种 形式 为 对 象 添加 属性 和 属性 值 : 


person.name = "Martin"; 
person.age = 13; 


同时 ， 也 可 以 通过 这 种 方式 访问 一 个 对 象 的 属性 。 图 15-1 显示 的 是 在 Chrome 浏览 器 的 控制 
台中 进行 相关 演示 。 
> var person = new Object() 
undefined 
> person.name = "Martin" 
"Martin" 
person.age = 13 
13 
> console.log(person) 
> Object (name: "Martin", age: 13} 
undefined 
console. log(person. name) 
Martin 
undefined 











图 15-1 
除了 可 以 为 对 象 定义 属性 外 , 还 可 以 为 对 象 定义 方法 。 下 面 为 之 前 的 person 对 象 定义 一 个 say() 
方法 ， 调 用 这 个 方法 可 以 弹出 一 个 对 话 框 ， 提 示 对 象 的 相关 信息 。 
person.say = function()í 
alert(person.name + person.age); 
} 
调用 该 方法 时 ， 直 接 使 用 person.say0 就 可 以 了 。 
一 般 情 况 下 ， 经 常会 定义 一 些 既 包含 属性 又 包含 多 个 方法 的 对 象 。 


Window 对 象 


本 章 内 容 要 点 : 
#* Window 对 象 以 及 常用 方法 


在 上 一 章 中 介绍 了 JavaScript 中 非常 重要 的 对 象 Array、String 和 Date， 这 些 对 象 是 学 习 
JavaScript 的 基础 ， 使 用 这 些 对 象 提供 的 属性 和 方法 ， 可 以 帮助 开发 者 编写 出 一 些 纯 JavaScript 的 
功能 。 但 是 ，JavaScript 是 一 种 前 端 脚本 语言 ， 在 之 前 介绍 的 对 象 中 很 难 找到 和 浏览 器 操作 相关 的 
方法 。 例 如 ， 如 何 获取 移动 端 设备 屏幕 大 小 、 如 何 查看 浏览 器 基本 信息 等 。 其 实 ， 这 些 在 JavaScript 
中 也 是 提供 了 丰富 的 对 象 及 属性 、 方 法 的 ， 这 些 对 象 和 浏览 器 、 界 面 的 相关 操作 息息相关 ， 被 称 为 
浏览 器 对 象 。 

Window 对 象 中 封装 了 一 些 和 浏览 器 窗口 展现 相关 的 属性 和 方法 , 开发 者 最 开始 经 常 使 用 的 简 
单方 法 “alert()” 方 法 就 是 Window 对 象 中 的 方法 。 下 面 将 对 Window 对 象 的 常用 属性 或 方法 进行 
介绍 。 





16.1 ”setinterval() 方 法 和 clearlnterval() 方 法 


1. setlnterval() 方 法 

setInterval() 是 Window 对 象 的 方法 , 可 以 设 定 一 个 定时 器 。setInterval() 方 法 需要 传 入 两 个 参数 : 
第 一 个 参数 是 要 执行 的 代码 ; 第 二 个 参数 是 间隔 时 间 ， 这 个 参数 的 单位 是 毫秒 。 这 个 方法 的 功能 是 
每 隔 一 定 的 时 间 就 执行 一 次 代码 。 下 面 是 一 个 简单 的 例子 ， 每 隔 1 秒 就 在 控制 台 打 印 出 “Hello”。 
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【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

<style type="text/css"> 

</style> 

</head> 

<body> 

<script type="text/javascript"> 

setInterval(function(){ 
console.log("Hello"); 

}, 1000); 

</script> 

</body> 

</html> 


第 一 个 参数 传 入 的 函数 是 一 个 匿名 函数 ， 用 来 打印 字符 ; 第 二 个 参数 代表 1000 毫秒 ， 即 每 隔 
1 秒 执行 一 次 。 

setInterval() 方 法 可 以 自动 每 隔 一 段 时 间 重 复 执行 某 一 段 代码 ， 所 以 可 以 实现 很 多 功能 。 

setInterval() 方 法 是 进行 原生 DOM 动画 效果 的 重要 利器 之 一 , 使 用 setInterval() 方 法 绘制 动画 效 
果 的 思路 是 每 隔 一 定 的 时 间 就 修改 元 素 的 CSS 相关 样式 ， 通 过 这 种 短 时 间 重 复 执行 的 方式 达到 动 
画 的 效果 。 下 面 给 出 一 个 例子 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
#animate í 
width: 200px; 
height: 200px; 
position: absolute; 
top: 100px; 
left: 100px; 
background: green; 
h 
</style> 
</head> 
<body> 
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<div id="animate"></div> 

<script type="text/javascript"> 

var animate = document.getElementByld("animate"); 

var leftOrigin = 100; 

setlnterval(function()í 
animate.style.left = leftOrigin + 10 + "px"; 
leftOrigin += 10; 

1, 50); 

</script> 

</body> 

</html> 


在 上 面 的 代码 中 ， 使 用 setInterval0 方 法 每 隔 50ms 就 将 元 素 CSS 属性 中 的 left 值 加 10， 从 而 
实现 动画 效果 。 如 果 想 要 元 素 移动 的 速度 加 快 ， 可 以 增加 函数 每 次 执行 时 的 增加 像素 值 ， 或 者 调 小 
每 次 执行 函数 的 时 间 间 隔 。 

setInterval() 方 法 还 可 以 实现 短 轮 询 。 短 轮 询 是 Web 实时 通信 技术 中 的 一 种 ， 在 后 面 的 内 容 中 
还 会 介绍 。 短 轮 询 采 用 每 隔 一 定时 间 向 后 台 发 送 AJAX 请 求 的 方式 来 实时 监控 服务 器 端 是 否 有 数 
据 更 新 。 

【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div id="animate"></div> 
<script type="text/javascript"> 
setlnterval(function() í 
$.ajax({ 

url: 'do.php', 

type: 'post', 

dataType: 'json', 

success: function(data) { 

console.log(data); 
$ 
W) 

}, 1000); 
</script> 
</body> 
</html> 
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上 面 的 代码 中 ， 每 阳 1 秒 钟 就 会 向 后 台 发 送 一 个 AJAX 请 求 。 如 果 后 台数 据 发 生变 化 ， 就 在 
某 一 次 请 求 中 返回 更 新 的 数据 ， 从 而 模拟 实现 服务 器 数据 推送 。 
还 可 以 使 用 setInterval() 方 法 实时 监测 页 面 中 的 某 些 元 素 ， 例 如 使 用 setInterval0 方 法 检测 输入 
框 内 容 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<input id="content" type="text"/> 
<div id="result"></div> 
<script type="text/javascript"> 
var content = document.getElementByld("content"'); 
var result = document.getElementByld("result"); 
setlnterval(function()í 
var con = content.value; 





result.innerHTML = con; 
}, 100); 
</script> 
</body> 
</html> 


上 面 的 代码 中 ， 模 拟 了 一 种 实时 更 新 用 户 输入 内 容 的 功能 。 虽 然 开 发 中 一 般 不 会 用 这 种 方式 
实现 该 功能 ， 但 是 它 展 现 出 了 setInterval() 方 法 的 强大 之 处 。 使 用 setInterval() 方 法 ， 还 可 以 实现 许 
多 的 复杂 功能 。 

2. clearlnterval() 方 法 


clearInterval() 方 法 可 以 清除 一 个 定时 器 。 例 如 ， 在 动画 效果 的 例子 中 ， 如 果 想 暂停 动画 效果 ， 
就 可 以 使 用 clearInterval() 方 法 ， 可 参看 下 面 的 例子 。 

【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
#animate{ 

width: 200px; 
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height: 200px; 
position: absolute; 
top: 100px; 
left: 100px; 
background: green; 
} 
</style> 
</head> 
<body> 
<div id="animate"></div> 
<button id="stop"> 暂 停 动画 </button> 
<script type="text/javascript"> 
var animate = document.getElementByld("animate"); 
var leftOrigin = 100; 
var stop = document.getElementByld("stop"); 
var timer = setlnterval(function() í 
if(leftOrigin < 500){ 
animate.style.left = leftOrigin + 10 + "px"; 
leftOrigin += 10; 
J 
}, 50); 
stop.click(function()í 
clearlnterval(timer); 


setInterval() 方 法 的 返回 值 就 是 这 个 定时 器 , 因此 在 定义 定时 器 方法 时 为 其 进行 变量 的 赋值 , 最 
后 传 入 clearInterval() 方 法 中 ， 实 现 定时 器 的 清除 。 





16.2 ”setTimeout() 方 法 和 clearTimeout() 方 法 


1. setTimeout() 方 法 

setTimeout() 方 法 传 入 的 参数 和 setInterval0 方 法 类 似 ， 第 一 个 参数 传 入 一 个 可 执行 的 函数 ， 第 二 
个 参数 传 入 一 个 毫秒 数 。setTimeout() 方 法 的 含义 是 ， 在 指定 的 毫秒 数 延迟 过 后 执行 一 次 函数 方法 。 
注意 ， 这 个 方法 只 会 执行 传 入 的 方法 一 次 ， 而 setInterval0 方 法 会 执行 传 入 的 方法 多 次 。 

在 下 面 的 示例 中 , 使 用 setTimeout() 方 法 , 实现 在 打开 界面 延迟 5 秒 后 弹出 欢迎 对 话 框 的 效果 。 

【示例 】 


<!DOCTYPE> 
<html> 
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<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width. initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<script type="text/javascript"> 
window.onload = function() í 
setTimeout(function() í 
alert(" Welcome"); 
}, 5000); 
} 
</script> 
</body> 
</html> 


setTimeout() 经 常 像 上 面 这 样 用 作 一 个 延迟 计时 器 。 除 此 之 外 ，setTimeout0 也 可 以 实现 循环 调 
用 的 效果 。 具 体 的 实现 思路 是 编写 一 个 函数 ， 在 内 部 使 用 setTimeout0 方 法 调用 自身 ， 从 而 实现 循 
环 调用 的 功能 。 下 面 使 用 这 种 思路 实现 一 个 定时 器 的 例子 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<input type="text" id="timer" value="0" > 
<button id="start"> 开 始 计时 </button> 
<script type="text/javascript"> 
var timer = document.getElementById("timer"); 
var start = document.getElementById("start"); 
var time = 0 
function calTime()í 
timer.value = time ++; 
setTimeout("calTime()", 1000); 


} 

start.onclick = function()í 
calTime(); 

} 


</script> 
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</body> 
</html> 
上 面 的 代码 使 用 setTimeout() 方 法 制作 了 一 个 简易 的 计时 器 .首先 ,开发 者 定义 了 一 个 calTime() 
函数 。 这 个 函数 的 作用 有 两 个 : 第 一 个 是 更 新 计时 器 的 值 , 第 二 个 是 每 隔 1 秒 调用 函数 本 身 。 这 种 
调用 模式 就 实现 了 每 隔 1 秒 执行 一 次 函数 的 效果 ， 其 实 和 setInterval0 方 法 可 以 实现 的 效果 是 类 似 
的 。 最 后 ， 当 开发 者 单 击 开始 按钮 时 ， 手 动 第 一 次 调用 calTime() 方 法 ， 之 后 就 可 以 实现 计时 的 效 
果 了 。 
2. clearTimeout() 方 法 
和 setInterval() 方 法 类 似 ，setTimeout() 方 法 也 有 一 个 可 以 清除 计时 器 的 方法 clearTimeout()。 它 
的 使 用 方法 和 clearInterval() 方 法 类 似 ， 都 是 传 入 setTimeout() 返 回 的 计时 器 实例 。 下 面 修改 之 前 的 
代码 ， 为 这 个 定时 器 添加 一 个 暂停 的 功能 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<input type="text" id="timer" value="0" /> 
<button id="start"> 开 始 计时 </button> 
<button id="stop"> 停 止 计 时 </button> 
<script type="text/javascript"> 
var timer = document.getElementByld("timer"); 
var start = document.getElementBylId("start"'); 
var stop = document.getElementByld("stop"); 
var time = 0 
function calTime()í 
timer.value = time ++; 
var timerCal = setTimeout("calTime()", 1000); 
} 
start.onclick = function() { 
calTime(); 
} 
stop.onclick = function(){ 
clearTimeout(timerCal); 
} 
</script> 
</body> 
</html> 
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上 面 的 代码 改进 了 两 个 地 方 : 首先 ， 将 setTimeout() 方 法 的 返回 值 进 行 赋值 ， 接 下 来 ， 在 单 击 
停止 计时 按钮 时 触发 clearTimeout() 方 法 清除 计时 器 ， 停 止 计 时 。 


16.3 Location 对 象 


Location 对 象 是 Window 对 象 中 的 一 个 属性 对 象 ，Location 对 象 的 一 些 属性 提供 了 和 当前 网 站 
域名 、 主 机 名 等 相关 的 信息 。 

Location 对 象 的 属性 用 来 设置 或 者 查看 当前 界面 的 URL， 如 果 使 用 Location 对 象 的 属性 对 当 
前 URL 的 一 些 参数 信息 进行 修改 ， 就 会 造成 界面 相应 的 变化 ， 如 重新 加 载 、 重 定向 等 。 下 面 介绍 
一 下 Location 对 象 中 常用 的 属性 。 

1. URL 的 构成 

首先 ， 在 这 里 介绍 一 下 页 面 中 URL 的 构成 。 

一 个 完整 的 URL 的 格式 如 下 : 

https://www. test.com:8000/news/index.html?username=Martin&email=Martin@qq.com#hash 

这 个 URL 是 由 以 下 部 分 组 成 的 : 

@ 协议 部 分 一 如 http: 或 者 https: 等 ， 在 上 面 的 URL 中 ， 协 议 部 分 为 “https:”。 
域名 部 分 一 一 主要 的 可 访问 网 址 ， 在 上 面 的 URL 中 ， 域 名 部 分 为 “www.test.com”。 
端口 部 分 一 一 冒号 后 的 一 串 数 字 ， 跟 在 域名 上 ， 在 上 面 的 URL 中， 端口 号 为 8000。 
目录 和 文件 部 分 上 面 的 例子 中 ，/news 代表 目录 ，inedx.html 表示 显示 的 文件 。 
参数 部 分 一 一 参数 部 分 的 内 容 是 使 用 get 方法 传递 的 数据 ， 这 部 分 内 容 在 后 面 有 更 详细 的 
讲解 。 从 ?开始 就 是 一 对 对 的 键 值 对 参数 ， 它 们 之 间 使 用 肥 进 行 连接 。 
o 锚 一 一 # 后 面 的 部 分 。 


2. Location 相关 属性 


了 解 了 URL 的 组 成 ， 接 下 来 我 们 看 看 Location 对 象 提供 了 哪些 和 URL 各 部 分 相关 的 属性 。 

host 属性 用 来 设置 或 者 返回 当前 URL 的 域名 以 及 端口 号 。 以 上 面 的 URL 为 例 ， 调 用 
location.href 属性 返回 的 就 是 “www.test.com:8000”。 要 想 多 测试 一 下 host 属性 到 底 返 回 的 是 什么 ， 
可 以 随便 打开 一 个 网 页 ， 打 开 chrome 控制 台 ， 输 入 location.host， 就 能 直接 返回 当前 浏览 网 页 的 
host 属性 值 了 ， 如 图 16-1 所 示 。 W op Y Preserve Tog 

如 果 只 想 返 回 服务 嚣 名， 不 想 要 端口 号 ， 可 以 使 用 | > tlocation.host 
location.hostname 。 如 果 只 想 返 回 端 口号 ， 就 可 以 使 用 > ec 
location.port。location.hostname 返回 值 和 location.port 返回 值 
放 在 一 起 就 是 location.host 的 返回 值 。 图 16-1 

pathname 属性 用 来 返回 路 径 部 分 ， 包 括 目录 和 具体 文件 。 在 上 面 的 例子 中 ，location.pathname 
返回 的 值 应 为 /news/index.html。 

protocol 属性 用 来 返回 URL 的 协议 。 在 上 面 的 URL 例子 中 , location.protocol 返回 的 值 为 URL 
的 协议 部 分 https:。 
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search 属性 可 以 返回 URL 中 的 参数 部 分 ， 也 就 是 上 面 所 说 的 ?后 面 的 内 容 。 如 果 对 上 述 URL 
使 用 location.search 属性 ， 返 回 值 为 ?username=Martin&email=Martin@qq.com。 注 意 ， 返 回 值 包含 
第 一 个 问号 。 利 用 search 方法 返回 的 字符 串 ， 可 以 配合 一 些 字符 串 的 方法 对 当前 URL 传递 的 参数 
进行 分 割 ， 经 常 需 要 将 这 些 参数 组 合成 一 个 对 象 。 

最 后 ， 要 想 获取 整个 URL， 可 以 使 用 location.href。 

上 面 介绍 的 属性 除了 可 以 获取 URL 的 相关 信息 外 ， 还 可 以 进行 URL 相关 信息 的 设置 。 这 样 
设置 会 改变 页 面 的 URL。 例 如 ， 通 过 window.location.href 设置 页 面 的 URL， 可 以 实现 页 面 跳 转 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<button id="href"> 跳 转 到 百度 </button> 
<script type="text/javascript"> 
var href = document.getElementById("href"); 
href.onclick = function()í 
window.location.href = "https://www.baidu.com"; 

















J 
</script> 
</body> 
</html> 


单 击 跳 转 按钮 ， 就 会 改变 location.href 的 值 ， 从 而 实现 页 面 的 跳 转 。 


本 章 内 容 要 点 : 
* 函数 的 定义 
* 函数 的 使 用 


函数 是 用 来 完成 某 种 特定 功能 的 代码 集合 ， 如果 想 使 用 JavaScript 进行 开发 ， 学 会 如 何 定义 和 
使 用 函数 是 最 基本 的 技能 。 本 章 将 为 大 家 介绍 如 何在 JavaScript 中 使 用 函数 以 及 如 何在 JavaScript 
中 灵活 应 用 函数 。 


17.1 函数 的 定义 


17.1.1 REŽ 


在 JavaScript 中 ， 函 数 主 要 包含 三 个 部 分 : 函数 名 、 参 数 、 函 数 体 。 函 数 名 即 函数 的 名 称 ， 就 
像 变量 名 一 样 ， 是 一 个 函数 的 标识 符 , 无 论 是 调用 还 是 赋值 ， 都 需要 使 用 这 个 函数 名 。 参 数 是 指 传 
入 方法 中 的 数值 ， 函 数 会 根据 传 入 的 参数 ， 经 过 相同 的 逻辑 ， 返 回 不 同 的 结果 。 函 数 体 就 是 编写 逻 
辑 代 码 的 地 方 。 

在 JavaScript 中 ， 基 本 的 函数 有 两 种 定义 方法 : 一 种 是 函数 的 声明 ， 另 一 种 是 函数 的 表达 式 。 

函数 声明 的 定义 方法 : 

function test (num) í 


console.log(num); 


} 
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函数 表达 式 的 定义 方法 : 

var test = function (num) í 

console.log(num); 

上 面 两 种 方式 都 能 够 定义 一 个 函数 名 为 test 的 函数 。 虽 然 这 两 种 方法 都 能 同样 生成 一 个 函数 ， 
日 是 二 者 还 是 有 差别 的 。 

使 用 函数 声明 定义 的 方法 ， 函 数 会 自动 提升 到 代码 的 开头 ， 而 使 用 函数 表达 式 的 方法 ， 则 不 
会 有 这 种 功能 。 这 种 区 别 体 现在 开发 者 调用 函数 的 时 候 , 使 用 函数 声明 定义 方法 时 ， 不 用 考虑 调用 
函数 的 顺序 关系 ,因为 函数 声明 定义 时 会 自动 提升 到 代码 开头 。 使 用 函数 表达 式 方法 时 ,如 果 顺 序 
错 了 ， 调 用 就 会 发 生 错误 ， 提 示 函 数 没有 定义 。 

上 面 两 种 方法 是 最 常见 的 定义 函数 的 方法 ， 除 此 之 外 ， 还 可 以 使 用 Function() 构 造 函 数 的 形式 
定义 一 个 函数 ， 例 如 : 

Var test = new Function("num", "console.log(num)"); 

完全 可 以 不 使 用 这 种 方法 定义 函数 ， 只 使 用 上 面 介绍 的 两 种 方式 定义 函数 即 可 。 

函数 也 是 变量 ， 因 此 函数 也 可 以 进行 赋值 。 例 如 ， 在 上 面 的 代码 定义 中 ， 如 下 代码 可 以 进行 
函数 的 赋值 : 

var x = test; 

这 样 ，x 变量 也 是 test 函数 了 ， 可 以 和 test 函数 一 样 进 行 函数 调用 。 
17.1.2 ”匿名 函数 


在 JavaScript 中 ,存在 一 种 叫 作 匿名 函数 的 函数 。 上 匿名 函数 不 存在 函数 名 ， 只 有 函数 体 ,例如 
下 面 的 例子 就 是 使 用 setImterval() 方 法 时 传 入 匿名 函数 作为 参数 。 


var timer = setlnterval(function () í 





其 中 ，setInterval() 方 法 传 入 的 第 一 个 参数 是 一 个 匿名 函数 。 当 开发 者 不 需要 函数 名 时 ， 直 接 定 
义 一 个 匿名 函数 就 可 以 了 , 这 样 可 以 让 代码 更 加 简洁 。 使 用 匿名 函数 的 方法 经 常 出 现在 上 面 这 种 将 
函数 作为 参数 的 情况 下 。 


17.1.3 自我 调用 函数 
在 JavaScript 中 ， 有 一 种 函数 ， 既 没有 函数 名 ， 还 可 以 进行 自我 调用 ， 这 种 函数 叫 作 自 我 调用 


函数 。 这 种 函数 的 特点 是 没有 函数 名 ， 在 对 应 的 JavaScript 开始 编译 时 ， 自 我 调用 方法 会 自动 执行 
内 部 的 代码 ， 它 的 定义 方法 像 下 面 这 样 : 
(function () í 
console.log("aaa"); 
DO; 


这 时 ， 在 引用 JavaScript 文件 时 ， 这 个 函数 就 会 自动 执行 。 





172 ”函数 调用 
当 开发 者 定义 了 一 个 函数 时 ， 就 可 以 进行 函数 的 调用 了 。 函 数 调用 就 是 为 这 个 函数 传 入 它 需 
要 的 参数 ， 进 行 函数 体 的 运算 。 下 面 是 一 个 函数 调用 的 例子 。 
【示例 】 
function cal (a, b) { 
return a * b; 
h 
cal(10, 20) 


上 面 就 是 一 个 函数 调用 的 过 程 。 首 先 ， 开 发 者 定义 了 一 个 函数 ， 用 来 计算 两 个 数 的 乘积 。 接 
下 来 ， 在 函数 调用 时 为 这 个 函数 传 入 所 需要 的 参数 ， 完 成 函数 的 调用 。 

如 果 一 个 函数 名 后 面 添加 了 0， 就 表示 函数 调用 了 。 如 果 没 有 添加 0， 只 是 一 个 函数 名 ， 就 表 
示 是 函数 的 赋值 ， 函 数 不 会 被 调用 。 例 如， 下 面 定义 一 个 不 需要 参数 的 函数 ,观察 函数 赋值 和 函数 
调用 的 区 别 。 

【示例 】 

function say Ó) Í 


alert("Hello!"); 
} 
sayAnother = say; 
say0; 
sayAnother(); 


在 上 面 的 代码 中 ,定义 了 一 个 say() 函 数 ， 用 来 显示 一 个 提示 框 。 首 先 ， 第 一 次 直接 使 用 了 say 
这 个 函数 名 ， 是 为 函数 赋值 ， 并 没有 执行 。 由 于 函数 也 是 变量 ， 因 此 现在 sayAnother 和 say 方法 是 
等 价 的 。 接 着 ， 使 用 say0 和 sayAnother() 这 两 个 方法 调用 了 say 函数 ， 最 后 的 结果 是 相同 的 。 


17.3 ”函数 的 作用 域 


JavaScript 中 的 函数 存在 一 种 叫 作 作用 域 的 概念 ， 作 用 域 指 的 是 一 个 区 块 ， 可 以 理解 为 变量 有 
效 的 位 置 。 在 编写 一 段 JavaScript 代码 时 ， 开 发 者 可 能 在 最 开始 定义 一 些 变量 、 定 义 一 些 函 数 ， 同 
时 也 会 在 函数 中 定义 一 些 变量 ， 例 如 : 

vara= 10; 

var b = 20; 

function test () í 

var test = 11; 
console.log(11); 
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} 


在 这 一 段 代码 中 ， 存 在 两 个 作用 域 : 一 个 是 全 局 作用 域 ， 也 就 是 整个 代码 部 分 ， 另 一 个 是 局 
部 作用 域 。 全 局 作用 域 中 定义 的 变量 、 对 象 等 在 任何 地 方 都 可 以 访问 ， 例 如 ， 像 下 面 这 样 修改 上 面 
的 例子 ， 程 序 是 不 会 报错 的 。 
var a = 10; 
var b = 20; 
function test () í 
var test = 11; 
var result = a + test; 
console.log(result); 
} 


这 里 ， 在 test 方 法 中 调用 了 在 函数 体外 部 定义 的 变量 a， 是 可 以 成 功 调用 的 ， 因 为 变量 a 定义 
在 全 局 作用 域 中 ， 任 何 内 部 的 变量 都 可 以 进行 访问 。 
反 过 来 就 不 行 了 ， 例 如 : 
var a= 10; 
var b = 20; 
function test () í 
var test = 11; 
var result = a + test; 
console.log(result); 


re 
开发 者 在 函数 的 外 部 访问 了 函数 内 部 的 变量 test, 就 会 报错 , 告诉 开发 者 test 变量 并 没有 定义 。 
这 是 因为 在 test 这 个 函数 内 部 是 一 个 局 部 作用 域 ， 而 局 部 作用 域 定义 的 变量 在 外 部 是 不 能 被 访问 
的 。 所以， 全 局 作用 域 定义 的 变量 ， 局 部 作用 域 可 以 访问 ， 而 局 部 作用 域 中 定义 的 变量 ， 其 他 作用 
域 中 不 能 访问 。 
之 所 以 这 样 设 定 ， 是 因为 要 考虑 一 种 情况 : 当 一 段 代码 中 定义 了 多 个 函数 时 ， 难 道 可 以 允许 
不 同 的 函数 之 问 访问 函数 内 部 定义 的 变量 么 ?如 果 可 以 这 样 , 那么 代码 就 完全 乱 了 , 也 不 存在 函数 
和 函数 之 间 的 封装 了 。 正 是 有 了 局 部 作用 域 这 样 的 设 定 ， 才 让 每 个 函数 之 间 没 有 关系 ， 从 而 实现 更 
好 的 代码 封装 。 
更 一 般 的 ， 在 JavaScript 中 还 有 父 作用 域 和 子 作 用 域 ， 一 层 一 层 向 下 递 推 。 
var a= 10; 
function test () { 
var b = 20; 
function test2 () í 
var m = 30; 


ii 
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在 上 面 的 代码 中 ， 存 在 三 个 作用 域 。 变 量 a 在 全 局 作用 域 中 ， 变 量 b 在 test 函数 的 作用 域 中 ， 
变量 m 在 test2 函数 的 作用 域 中 。test2 方法 可 以 访问 上 面 定义 的 所 有 变量 ， 因 为 test2 方法 是 最 底 
层 的 作用 域 。 在 全 局 作用 域 中 ， 只 能 访问 变量 a， 无 法 访问 其 他 变量 。 上 层 的 作用 域 不 能 访问 下 层 
作用 域 中 定义 的 变量 , 而 下 层 作用 域 可 以 访问 上 层 定义 的 变量 , 这 就 是 JavaScript 中 的 作用 域 规则 。 


17.4 ”函数 的 参数 


JavaScript 中 函数 的 参数 非常 灵活 ， 这 得 益 于 JavaScript 的 语言 特性 。JavaScript 中 的 函数 参数 
既 可 以 是 普通 变量 ， 也 可 以 是 一 个 对 象 ， 甚 至 可 以 是 一 个 函数 。 


jQuery 中 的 选择 器 


本 章 内 容 要 点 : 

w 元 素 选择 器 

jQuery 中 最 被 广大 开发 者 喜爱 的 就 是 其 中 的 选择 器 。jQuery 中 的 选择 器 非常 丰富 ， 而 且 选 取 
元 素 的 代码 非常 简洁 。 例 如 ， 下 面 两 个 代码 分 别 是 使 用 原生 JavaScript 和 jQuery 获取 一 个 id 名 称 
“test” 的 元 素 : 

@ 原生 JavaScript 写法 : var test = document.getElementByld("test"); 

© jQuery 写法 : vartest = $("#test") 

可 以 看 到 ， 使 用 jQuery 中 的 元 素 选择 器 ， 代 码 非 常 简洁 。 此 外 ，jQuery 还 封装 了 许多 其 他 元 
素 选择 器 的 方法 。 如 果 开 发 者 希望 用 原生 的 JavaScript 实现 这 些 jQuery 中 为 开发 者 封装 好 的 方法 ， 
就 需要 许多 的 代码 量 。 因 此 ， 使 用 jQuery 可 以 极 大 地 方便 开发 者 进行 开发 。 


18.1 选取 所 有 元 素 


在 jQuery 中 ， 像 调用 其 他 方法 一 样 ， 使 用 $0 进行 元 素 的 选择 。 
如 果 想 获取 所 有 元 素 ， 可 以 使 用 通配符 * 进 行 选择 ， 下 面 的 代码 就 获取 了 整个 文档 中 的 所 有 
元 素 。 
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【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script sre="http://code .jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
</style> 
</head> 
<body> 

<div class="container"> 

<div class="test"></div> 


</div> 

<script> 

var all = $("*"); 

console.log(all); 

</script> 

</body> 

</html> 

首先 ， 使 用 $("*") 获 取 全 部 元 素 ， 为 了 查看 这 些 元 素 的 形势 ， | “iit el 
使 用 console.log() 进 行 打印 。 打 开 Chrome 的 console 进行 查看 ， <q. head 
效果 如 图 18-1 所 示 。 Pia 

$("*") 返 回 的 是 一 个 数组 , 这 个 数组 中 包含 了 整个 文档 中 的 所 +5: style 


> 6: body 


有 元 素 节点 。 注 意 ， 这 里 面 返回 的 是 元 素 节点 ， 忘 记 元 素 节点 概 “| h av container 

念 的 可 以 在 JavaScript 章节 中 查看 。 但是, 这 些 返 回 的 元 素 并 不 是 “| “9 set 

一 般 的 元 素 节点 。 为 了 对 比 , 接 下 来 使 用 原生 的 JavaScript (Rik |” context: docunent 

IN id A test 的 元 素 ， 与 jQuery 获取 的 test 元 素 进行 比较 。 pbrevoblect inier 
> _proto_: 0bject[9] 





【示例 】 图 18-1 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div class="container"> 
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<div id="test"></div> 

</div> 
<script> 
var all = $("*"); 
console.log(all); 
var test = document.getElementByld("test"); 
console.log(test); 
</script> 
</body> 
</html> 


打开 浏览 器 的 Chrome 控制 台 查 看 效果 ，jQuery 获取 的 test 元 素 内 容 如 图 18-2 所 示 。 


accessKey: "" 
align: "" 
assignedSlot: null 
> attributes: NamedNodeMap 
baseURI: "file:///Users/fareise/Desktop/book-filter/Jquery%E9%83%A8%E5% 
childElementCount: @ 
> childNodes: NodeList [0] 
* children: HMLCollection [0] 
* classList: DOMTokenList [1] 
className: "test" 
clientHeight: 0 
clientLeft: 9 
clientTop: 0 
clientwidth: 1264 
contentEditable: "inherit" 
* dataset: DOMStringMap 
dir: "" 
draggable: false 
firstChild: null 
firstElementChild: null 
hidden: false 
id: "" 





图 18-2 


原生 JavaScript 获取 的 test 元 素 内容 如 下 : 





<div id= "test"></div> 





可 以 看 到 ， 二 者 虽然 返回 的 都 是 指定 的 节点 ， 但 是 它们 的 样子 完全 不 同 。 

下 面 介绍 一 个 新 手 经 常 容易 犯 的 错误 , 也 是 使 用 jQuery 时 非常 重要 的 点 。 其 实 , EH jQuery 
的 方法 获取 一 个 元 素 的 时 候 , 这 个 元 素 已 经 被 jQuery 进行 包装 了 。 jQuery 为 这 些 元 素 添加 了 jQuery 
中 特有 的 方法 ， 使 用 这 些 jQuery 方法 可 以 对 元 素 进行 种 类 繁多 的 操作 。 将 这 种 元 素 叫 作 jQuery 
对 象 。 

使 用 原生 JavaScript 返回 的 只 是 一 个 HTML 标签 片段 ， 并 不 是 一 个 对 象 。 这 个 HTML 标签 片 
段 也 有 一 些 方法 ， 如 innerHTML 等 。 

这 里 需要 注意 的 是 ， 当 想 使 用 jQuery 中 的 方法 时 ， 一 定 要 确保 这 个 元 素 是 一 个 jQuery 对 象 ， 
普通 的 元 素 是 不 能 使 用 jQuery 方法 的 ， 即 便 已 经 引入 了 jQuery 插件 库 。 

如 果 通 过 原生 JavaScript 的 方法 获取 了 一 个 元 素 ， 但 是 想 让 这 个 元 素 拥有 jQuery 的 方法 ， 怎 
么 办 呢 ? 开 发 者 可 以 使 用 $0 将 元 素 转 换 成 jQuery 对 象 ， 让 这 个 元 素 可 以 使 用 jQuery 方法 。 下 面 通 
过 一 个 例子 进行 说 明 。 
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【示例 】 

<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" > 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 

<style type="text/css"> 

</style> 

</head> 

<body> 

<div class="container"> 
<input value="hello" id="hello" /> 
<button id="changeJavascript">CHANGE-Javascript</button> 
<button id="changeJQuery">CHANGE-JQuery</button> 
</div> 

<script> 

var hello = document.getElementById("hello"); 

var helloJquery = $(hello); 

changeJQuery.onclick = function() í 

helloJquery.val("CHANGE!"); 

J 

changeJavascript.onclick = function() { 

hello.val("CHANGE!") 

; 

</script> 

</body> 

</html> 

jQuery 中 的 val0 方 法 可 以 获取 一 个 input 标签 中 的 value 属性 值 ,如 果 传 入 了 一 个 值 , 那 么 val() 
可 以 修改 这 个 input 标签 的 value 属性 值 。val0 方 法 就 是 上 面 所 说 的 jQuery 对 象 方法 ， 只 有 jQuery 
对 象 可 以 使 用 ， 而 普通 JavaScript 无 法 调用 。 

上 面 的 例子 中 有 两 个 change 按钮 ， 它 们 都 想 通过 val0 方 法 修改 input 标签 的 value 属性 值 。 
changeJavaScript 按钮 直接 使 用 了 通过 document.getElementById() 方 法 获取 到 的 JavaScript 元 素 调用 
Val() 方 法 ; 而 changeJQuery 按钮 则 使 用 了 经 过 jQuery 包装 的 jQuery 对 象 , 包装 方法 就 如 之 前 所 说 ， 
使 用 $0 进行 包装 。 

在 浏览 器 中 查看 效果 ， 当 单 击 changeJavaScript 按钮 时 ,界面 没有 任何 变化 , 而且 打开 Chrome 
控制 台 ，console 会 报错 : 


Uncaught TypeError: hello.val is not a function 

这 表明 JavaScript 元 素 并 没有 val() 方 法 可 以 调用 。 

当 单 击 changeJQuery 按钮 时 ，input 标签 中 的 内 容 成 功 发 生 了 变化 ,说 明 元 素 已 经 通过 $() 被 正 
确 封装 成 了 jQuery 对 象 ， 可 以 正常 调用 jQuery 中 的 val0 方 法 了 。 
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这 是 一 个 很 多 初学 者 都 特别 容易 犯 的 错误 ， 而 且 有 的 时 候 特 别 难以 发 现 问题 所 在 。 在 开发 过 
程 中 ， 如 果 希 望 使 用 jQuery 方法 ， 一 定 要 保证 jQuery 方法 的 调用 者 是 一 个 jQuery 对 象 ， 否 则 就 会 
出 错 。 


182 ”基本 选择 器 


基本 选择 器 包括 id 选择 器 、class 选择 器 和 元 素 选择 器 。 


18.2.1 id 选择 器 
id 选择 器 使 用 村 g 取 ， 需 要 传 入 元 素 的 id。 比如 $("#test) 就 获取 了 id 值 为 test 的 元 素 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 


<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
#test{ 
width: 100px; 
height: 100px; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<div id="test"></div> 
</div> 
<script> 
var test = $("#test"); 
test.html("TEST!"); 
</script> 
</body> 
</html> 


html(0) 是 jQuery 中 的 方法 ， 该 方法 可 以 设置 元 素 的 HTML 内 容 。 上 面 的 例子 中 使 用 $("#test") 
获取 到 id 值 为 test 的 元 素 ， 并 设置 其 HTML 内 容 。 


18.2.2 class 选择 器 
class 选择 器 与 id 选择 器 类 似 , 只 需要 将 # 变 为 .就 可 以 获取 相应 class 的 元 素 。class 选择 器 根据 
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元 素 的 class 进行 选择 ,返回 的 是 一 个 数组 ,数组 中 包括 了 文档 中 所 有 class 为 相应 值 的 元 素 ， 既 可 
以 通过 索引 获取 想 要 的 某 个 元 素 ， 也 可 以 通过 循环 来 为 每 个 元 素 进 行 操作 。 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
„test{ 
width: 100px; 
height: 100px; 
margin: 10px; 





} 

</style> 

</head> 

<body> 

<div class="container"> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
</div> 

<script> 

var test = $(".test"); 

console.log(test); 

for(var i = 0; i < test.length; i ++){ 
test.html("TEST!"); 

} 

</script> 

</body> 

</html> 


上 面 代码 中 ，var test = $(".test"): 使 得 test 保存 了 一 个 由 所 有 class 为 test 的 元 素 组 成 的 数组 。 
接 下 来 ， 使 用 for 循环 遍历 ， 为 每 个 元 素 设 定 其 HTML 内 容 。 

其 实 ， 不 用 遍历 ， 直 接 进 行 操作 也 可 以 实现 上 述 效 果 ， 这 是 jQuery 对 象 的 特点 。 当 需要 为 某 
一 个 class 的 元 素 指定 相同 的 行为 时 ， 这 种 特性 可 以 很 方便 地 实现 这 种 批量 操作 。 

【示例 】 


<!DOCTYPE> 
<html> 
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<head> 

<meta charSet= "utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 

<style type="text/css"> 

‘test{ 
width: 100px; 
height: 100px; 
margin: 10px; 

} 

</style> 

</head> 

<body> 

<div class="container"> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
</div> 

<script> 

var test = $(".test"); 

test.html("TEST!"); 

</script> 

</body> 

</html> 


对 上 面 例子 的 代码 进行 了 修改 ， 没 有 使 用 for 循环 进行 遍历 ， 仍 然 可 以 实现 之 前 的 效果 。 

使 用 class 选择 器 ， 还 可 以 指定 多 个 class， 当 指定 多 个 class 时 ， 会 选取 包含 开发 者 指定 的 所 
有 class 的 对 应 元 素 。 通 过 $(".classl.class2") 这 段 代码 ， 就 选取 了 class 包含 classl 和 class2 两 者 都 
具有 的 元 素 。 

【示例 】 

<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 





<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
.test{ 
width: 100px; 
height: 100px; 
margin: 10px; 
background: green; 
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h 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="test">NOT TARGET</div> 
<div class="test target">TAGET</div> 
</div> 
<script> 
var test = $(".test.target"); 
test.html("CHANGE!"); 
</script> 
</body> 
</html> 


上 面 的 代码 定义 了 两 个 div 元 素 : 第 一 个 元 素 只 为 其 指定 了 一 个 class test， 第 二 个 元 素 包含 test 
和 target 两 个 类 名 。 当 使 用 $(".test.target") 获 取 元 素 时 ， 返 回 的 数组 包含 的 是 第 二 个 div 元 素 。 


多 class 元 素 选 择 非常 常用 。 例 如 ， 在 导航 菜单 中 ， 某 一 刻 只 有 一 个 选项 栏 是 选中 状态 ， 
选中 状态 的 菜单 项 和 菜单 栏 中 其 他 未 选中 的 菜单 项 样式 不 同 ， 这 种 情况 一 般 会 为 被 选中 的 元 
素 动态 添加 一 个 .active 的 类 来 实现 (通过 JavaScript 动态 添加 ) 。 一 个 类 似 情况 的 菜单 栏 代码 
如 下 : 

<ul> 

<li class="nav active"> 首 页 </li> 
<liclass="nav"> 导 航 1</i> 
<li class="nav"> 导 航 2</li> 
<liclass="nav"> 导 航 3</li> 
<liclass="nav"> 导 航 4</li> 

</ul> 

一 般 ， 对 于 当前 处 于 active 状态 的 菜单 项 ， 会 有 很 多 特别 的 操作 ， 这 时 这 种 多 class 选择 
器 就 会 很 容易 地 选 出 需要 的 目标 元 素 。 如 果 没 有 jQuery， 这 个 过 程 就 需要 编写 大 量 的 代码 。 


18.2.3 “元素 选择 器 

元 素 选 择 器 比较 简单 ， 直 接 传 入 想 选择 的 标签 ， 就 可 以 获取 所 有 该 标签 的 元 素 所 组 成 的 数组 ， 
和 class 选择 器 类 似 。 

【示例 】 

<!DOCTYPE> 


<html> 
<head> 
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<meta charSet="utf-8" > 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 

<style type="text/css"> 


.test{ 
width: 100px; 
height: 100px; 
margin: 10px; 

} 

</style> 

</head> 

<body> 


<div class="container"> 
<p class="test"></p> 
<p class="test"></p> 
<div class="test"></div> 
<div class="test"></div> 
<div class="test"></div> 
</div> 
<script> 
var test = $("p"); 
test.html("TEST!"); 
</script> 
</body> 
</html> 


在 上 面 的 例子 中 ， 有 5 个 元 素 的 class 名 都 是 test， 其 中 前 两 个 是 <p> 元 素 ， 后 三 个 是 <div> 元 
要 想 选择 p 元 素 ， 可 以 使 用 元 素 选择 器 。$("p") 返 回 了 文档 中 的 全 部 p 标签 ， 并 通过 html() 方 





法 为 这 些 p 标签 指定 HTML 内 容 。 
1824 组 合 使 用 基本 选择 器 


多 class 选择 器 其 实 只 是 一 个 特例 ， 还 有 很 多 种 类 似 的 组 合 方法 可 以 使 用 ， 它 们 的 组 合 可 以 很 


方便 地 选择 目标 元 素 。 下 面 是 一 个 例子 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
„test{ 
width: 100px; 
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height: 100px; 
margin: 10px; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<p class="test"></p> 
<p class="target"></p> 
<div class="target"></div> 
</div> 
<script> 
var target = $("p.target"); 
target.html ("TARGET"); 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 , 我 们 希望 获取 的 是 class 为 target 的 <p> 元 素 , 但 是 从 上 面 的 HTML 结构 看 ， 
class 为 target 的 元 素 有 两 个 ， 一 个 是 div， 一 个 是 p， 这 时 可 以 使 用 组 合 的 方法 选择 目标 元 素 。 
$("p.target") 就 选中 了 需要 的 元 素 ， 它 的 含义 是 ， 选择 class 值 为 target 的 <p> 元 素 。 


183 位置 选择 器 


只 用 jQuery 中 的 基本 选择 器 ， 就 已 经 可 以 实现 许多 在 原生 JavaScript 中 需要 许多 代码 才能 实 
现 的 选择 器 功能 。 但 是 ，jQuery 中 还 提供 了 许多 其 他 的 选择 器 方法 ， 这 些 方法 使 得 jQuery 的 选择 
器 更 加 强大 ， 基 本 成 为 JavaScript 开发 中 不 可 或 缺 的 函数 库 。 

jQuery 中 选择 的 编码 方式 很 大 程度 上 借鉴 了 CSS 选择 器 的 编码 方式 ， 因 此 ， 如 果 已 经 非常 熟 
练 地 掌握 了 CSS 选择 器 ， 学 习 jQuery 选择 器 并 不 会 感到 困难 。 


18.3.1 选择 特殊 位 置 
jQuery 提供 了 以 下 方法 来 选择 特殊 位 置 的 元 素 : 














o :first 一 一 选择 目标 元 素 组 中 的 第 一 个 元 素 。 

e :last 选择 目标 元 素 组 中 的 最 后 一 个 元 素 。 

© ‘even 选择 目标 元 素 组 中 的 第 偶数 个 元 素 。 
° :0dd 一 一 选择 目标 元 素 组 中 的 第 奇数 个 元 素 。 


使 用 这 些 位 置 选 择 器 ， 需 要 结合 之 前 介绍 的 基本 选择 器 。 位 置 选 择 器 其实 是 在 基本 选择 器 的 
基础 上 添加 一 些 修饰 , 以 此 来 选择 出 各 小 范围 的 元 素 。 下 面 的 例子 选择 所 有 p 标签 中 的 第 一 个 元 素 。 


294 | HTML5+jQuery Mobile 移动 应 用 开发 





【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
pí 
width: 100px; 
height: 50px; 
margin-top: 20px; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
<p class="test">normal</p> 
<p class="test">normal</p> 
<p class="test">normal</div> 
</div> 
<script> 
var target = $("p:first"); 
target.htmI ("TARGET"); 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 ， 将 第 一 个 p 元 素 的 HTML 内 容 修改 成 了 “TARGET”。 选 中 第 一 个 <p> 元 
素 的 方法 就 是 使 用 基本 选择 器 和 位 置 选择 器 相 结合 的 方法 。$("p" 可 以 获取 到 所 有 的 p 标签 ， 而 添 
加 了 :first 修饰 位 置 之 后 ， 就 可 以 获取 到 所 有 <p> 元 素 的 第 一 个 元 素 了 。 

使 用 :even 或 者 :odd 的 方法 类 似 ， 只 不 过 这 些 位 置 选择 器 会 返回 一 个 数组 ， 这 个 数组 中 包含 了 
所 有 符合 条 件 的 元 素 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 

<style type="text/css"> 

pí 
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width: 100px; 
height: 50px; 
margin-top: 20px; 

} 

</style> 

</head> 

<body> 

<div class="container"> 
<p class="test">normal</p> 
<p class="test">normal</p> 
<p class="test">normal</div> 
<p class="test">normal</div> 
<p class="test">normal</div> 
</div> 

<script> 

var target = $("p:odd"); 

target.html("TARGET"); 

</script> 

</body> 

</html> 


在 上 面 的 代码 中 ，$("p:odd") 获 取 到 了 所 有 位 于 偶数 位 置 的 <p> 元 素 ， 在 浏览 器 中 查看 效果 ， 可 


以 发 现 只 有 位 于 偶数 位 置 的 <p> 元 素 的 内 容 被 修改 成 了 “TARGET”。 
1832 ”任意 位 置 选择 器 


特殊 位 置 选 择 器 可 以 选择 特殊 的 位 置 元 素 ，jQuery 中 还 提供 了 可 以 选择 任意 位 置 的 元 素 选择 


:eq(0) 选 择 器 可 以 选取 目标 元 素 集中 任 一 位 置 的 元 素 ， 只 需要 传 入 位 置 的 编号 即 可 。 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
pí 
width: 100px; 
height: 50px; 
margin-top: 20px; 
background: green; 
} 


</style> 
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</head> 
<body> 
<div class="container"> 
<p class="test">normal</p> 
<p class="test">normal</p> 
<p class="test">normal</div> 
<p class="test">normal</div> 
<p class="test">normal</div> 
</div> 
<script> 
var target = $("p:eq(2)"); 
target.html("TARGET"); 
</script> 
</body> 
</html> 


打开 浏览 器 查看 效果 ， 如 图 18-3 所 示 。 

在 上 面 的 代码 中 ， 使 用 :eq(2) 来 限定 获取 到 的 p 元 素 集 。 注 意 ， 这 里 传 入 的 2 指 的 是 索引 ， 索 
引 是 从 0 开始 的 。 因 此 :eq(2) 选 择 的 是 index 值 为 2 的 元 素 ， 在 浏览 器 中 显示 对 应 的 就 是 第 三 个 
元 素 。 

有 了 :eq0 选 择 器 ， 就 可 以 选择 任意 位 置 的 元 素 了 。:eq() 选 择 器 也 存在 着 缺点 ， 它 只 能 选择 出 某 
一 个 元 素 。jQuery 中 还 提供 了 一 种 能 够 根据 索引 值 获取 元 素 的 方法 。 

在 jQuery 中 ，:gt0 选 择 器 可 以 选择 出 index 索引 值 大 于 某 一 给 定 值 的 元 素 ，:lt() 选 择 器 可 以 选 
择 出 index 索引 值 小 于 某 一 给 定 值 的 元 素 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
pi 
width: 100px; 
height: 50px; 
margin-top: 20px; 
background: green; 
h 
</style> 
</head> 
<body> 
<div class="container"> 
<p class="test">normal</p> 
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<p class= "test">normal</p> 
<p class="test">normal</div> 
<p class="test">normal</div> 
<p class="test">normal</div> 
</div> 

<script> 

var target = $("p:gt(2)"); 

target.html("TARGET"); 

</script> 

</body> 

</html> 


浏览 器 展现 效果 如 图 18-4 所 示 。 











18-3 图 18-4 


当 使 用 $("p:gt(2)") 选 择 器 时 ，jQuery 会 选择 出 index 索引 值 大 于 2 的 元 素 ， 在 上 面 的 例子 中 也 
就 是 index 值 为 3 和 4 的 元 素 。 有 了 :gt() 和 :lt() 选 择 器 , 就 可 以 很 方便 地 选取 一 组 元 素 中 前 几 个 元 素 
或 者 后 几 个 元 素 了 。 


18.4 属性 选择 器 





jQuery 中 还 提供 了 通过 元 素 的 属性 选择 元 素 的 方法 ， 比 如 有 一 个 元 素 : 

<a href="test.html">TEST</a> 

那么 属性 选择 器 就 可 以 根据 这 个 标签 的 href 属性 值 进 行 选 择 。 

jQuery 中 的 属性 选择 器 需要 使 用 0] 进行 声明 ，[] 内 部 传 入 属性 选择 器 相关 的 参数 ， 有 如 下 多 种 
实现 方法 。 
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$("[href]"): 获取 带 有 href 属性 的 元 素 。 

S$("[href='test.html"]"): 获取 href 属性 值 为 test.html 的 元 素 。 
$("[hrefl='test.html']"): 获取 href 属性 值 不 是 test.html 的 元 素 。 
$("[href$='.html']"): 获取 href 属性 值 包含 以 .html 结尾 的 元 素 。 


下 面 的 例子 为 读者 展现 了 属性 选择 器 的 用 法 。 
【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" > 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/ jquery- 1 .8.0.min.js"></script> 

<style type="text/css"> 


af 
width: 100px; 
height: 50px; 
margin-top: 20px; 
background: green; 
display: block; 

} 

</style> 

</head> 

<body> 

<div class="container"> 


<a>normal</a> 
<a href="test.html">normal</a> 
<a href="other.html">normal</a> 
<a href="other.jpg">normal</a> 
</div> 
<button> 获 取 包 含 href 属性 的 元 素 </button> 
<button> 获 取 href 属性 值 为 test.html 的 元 素 </button> 
<button> 获 取 href 属性 值 不 为 test.html 的 元 素 </button> 
<button> 获 取 href 属性 值 以 .html 结尾 的 元 素 </button> 
<script> 
var btn = $("button"); 
var a = $("a"); 
btn[0].onclick = function()í 
a.html(normal); 
$("[href]").html(TARGET): 
h 
btn[1].onclick = function()í 
a.html(normal); 
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$("[href]='test.html"").htmI (TARGET); 

} 

btn[2].onclick = function()í 
a.html(normal); 
$("[href]!='test.html'").html(TARGET); 

} 

btn[3].onclick = function() í 
a.html(normal); 
$("[href]$='.htm!").htmI (TARGET); 

} 

</script> 

</body> 

</html> 


在 上 面 的 代码 中 ， 为 了 检测 每 一 种 属性 选择 器 的 功能 ， 定 义 了 4 个 按钮 ， 分 别 用 来 获取 包含 
href 属性 的 元 素 、 获 取 href 属性 值 为 test.html 的 元 素 、 获 取 href 属性 值 不 为 test.html 的 元 素 、 获 取 
href 属性 值 以 .html 结尾 的 元 素 。 最 后 ， 通 过 html() 方 法 改变 选中 元 素 的 HTML 内 容 来 测试 是 否 选 
择 了 目标 元 素 。 


185 ”表单 选择 器 


<input> 元 素 是 前 端 开 发 过 程 中 最 常用 的 元 素 ， 并 且 <input> 元 素 的 属性 复杂 ， 用 法 变化 很 多 。 
因此 ，jQuery 中 专门 为 <input> 元 素 制定 了 一 系列 的 选择 器 方法 ， 以 此 来 获取 目标 的 表单 元 素 。 这 
些 选择 器 方法 也 是 和 CSS 中 的 选择 器 相对 应 的 。 

18.5.1 根据 type 选择 对 应 的 input 

input 标签 的 type 属性 比较 复杂 ， 通 过 制定 type 属性 ， 可 以 实现 <inpu 人 标签 不 同 的 表现 形式 。 
同时 ，HTMLS 中 更 加 注重 对 于 <input> 元 素 type 属性 的 应 用 。jQuery 专门 针对 <inpu 人 标签 的 type 
属性 制定 了 一 系列 的 选择 器 方法 。 

比如 ， 希 望 选 择 一 个 表单 中 负责 提交 表单 按钮 的 <inpuf> 标 签 ， 这 部 分 的 HTML 代码 如 下 : 

<input type="submit" value=" 提 交 "/> 

要 想 使 用 表单 选择 器 获取 这 个 元 素 ， 可 以 使 用 下 面 这 段 代码 : 

$(":submit") 

使 用 :开头 ， 代 表 这 是 一 个 表单 选择 器 ， 后 面 直接 跟 上 希望 选择 的 type 值 ， 就 可 以 选中 需要 的 
<input> 元 素 了 。 需 要 注意 ， 这 个 方法 返回 的 也 是 一 个 数组 ， 因 为 在 一 个 HTML 文档 中 ， 可 能 有 多 
个 <input> 元 素 符合 要 求 。 

表 18-1 中 是 全 部 的 根据 type 属性 选择 元 素 的 表单 选择 器 。 
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表 18-1 type 属性 选择 元 素 的 表单 选择 器 
名 K 使 用 方法 说 明 
:input $(":input") 所 有 <input> 元 素 
:text $(":text") 所 有 type="text" 的 <input> 元 素 
:password $(":password") 所 有 type="password" 的 <input> 元 素 
:radio $(":radio") 所 有 type="radio" 的 <input> 元 素 
:checkbox $(":checkbox") 所 有 type="checkbox" 的 <input> 元 素 
:Submit $(":submit") 所 有 type="submit" 的 <input> 元 素 
:reset $(":reset") 所 有 type="reset" 的 <input> 元 素 
:button $(":button") 所 有 type="button" 的 <input> 元 素 
:image $(":image") 所 有 type="image" 的 <input> 元 素 
:file $(": file") 所 有 type="file" 的 <input> 元 素 
18.5.2 ”状态 选择 器 


除了 可 以 根据 <input> 元 素 的 type 属性 选择 元 素 外 , jQuery 中 还 提供 了 根据 <input> 标 签 的 状态 
选择 元 素 的 方法 。 


表单 中 的 一 个 input 元 素 可 能 有 如 下 状态 。 


a. 


c. 


© © o o 


激活 : input 标签 可 以 正常 进行 编辑 内 容 等 操作 。 


b. 禁 用 : input 标签 不 能 进行 编辑 等 操作 。 


选取 : 被 选取 的 input 元 素 ， 这 里 指 的 是 被 选中 的 <option> 元 素 。 


d. 选 中 : 被 选中 的 input 元 素 ， 这 里 指 的 是 被 选中 的 <checkbox> 元 素 。 
这 种 状态 选择 器 非常 有 用 。 在 开发 过 程 中 ， 开 发 者 经 党 


;要 对 用 户 选 取 或 者 选择 的 表单 部 分 做 





特殊 操作 ， 这 时 就 可 以 使 用 状态 选择 器 来 进行 处 理 ， 轻 而 易 举 地 选择 到 开发 者 想 要 的 元 素 。 
【示例 】 


<!DOCTYPE> 
<html> 


<head: 


> 


<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 


<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 


<style 


type="text/css"> 


</style> 
</head> 
<body> 


<div class="container"> 


=" 


<select id="choose"> 


<option> 未 选中 </option> 
<option> 未 选中 </option> 
<option> 未 选中 </option> 
<option> 未 选中 </option> 
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<option> 未 选中 </option> 
</select> 

</div> 

<script> 

$("#choose").onchange = function()í 
var target = $(":selected"); 
target.html(" 选 中 "); 

} 

</script> 

</body> 

</html> 


在 上 面 的 例子 中 , 不 管 在 浏览 器 中 如 何 选择 , 最 后 显示 的 内 容 都 是 选中 。 这 是 因为 我 们 为 select 
元 素 绑 定 了 一 个 onchange 方法 ， 每 次 select 所 选取 的 项 目 发 生变 化 时 ， 都 会 获取 当前 选中 的 元 素 
并 修改 其 html 内 容 。 这 里 就 是 通过 $(":selected") 获 取 到 的 被 选中 的 元 素 。 


186 ”灵活 使 用 各 种 选择 器 


上 面 的 内 容 对 jQuery 中 最 重要 的 一 些 选择 器 进行 了 介绍 。 实 际 开发 中 ， 单 独 使 用 某 一 个 选择 
器 所 能 达成 的 功效 并 不 是 最 大 的 ， 更 多 情况 下 是 综合 使 用 各 种 类 型 的 选择 器 来 选择 所 需要 的 元 素 。 


【场景 】 


某 HS 视频 平台 ， 每 周 需要 为 最 受 欢 迎 的 视频 进行 排序 ， 将 排名 前 五 位 的 视频 置 于 首页 某 板块 
展示 。 需 求 规定 ， 上 榜 视 频 中 前 三 位 的 视频 名 称 需 要 用 特殊 样式 标注 ， 以 下 是 HTML 代码 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div class="weekTop"> 

<p class="name">Mark</p> 

<p class="name">Mark</p> 

<p class="name">Mark</p> 

<p class="name">Mark</p> 

<p class="name">Mark</p> 
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<p class="name">Mark</p> 

</div> 
<script> 
</script> 
</body> 
</html> 

【解决 方法 】 采 用 jQuery 中 基本 选择 器 与 任意 位 置 选择 器 结合 的 办 法 ， 很 容易 实现 该 功能 。 

周 榜 前 三 名 的 视频 , 即 所 有 获取 到 的 视频 中 索引 值 小 于 3 的 ,因此 下 面 的 代码 即 可 获取 到 目标 元 素 : 


$(".name:lt(3)") 


jQuery 中 的 DOM 方法 


本 章 内 容 要 点 : 

%* DOM 选择 元 素 方法 的 使 用 

选择 器 是 jQuery 中 获取 DOM 元 素 的 神器 。 在 jQuery 中 ， 还 有 一 些 方法 可 以 通过 元 素 之 间 的 
关系 获取 到 不 同 的 元 素 。 jQuery 中 存在 着 丰富 的 通过 DOM 节点 关系 获取 元 素 的 方法 , 这 些 方 法 是 
对 原生 JavaScript 的 一 个 扩展 ， 使 用 起 来 非常 方便 。 

jQuery 中 关于 DOM 节点 关系 选择 元 素 的 方法 基于 的 是 DOM 元 素 的 遍历 。 在 一 个 HTML X: 
P, DOM 元 素 的 关系 包括 父 元 素 和 子 元 素 的 关系 、 祖 先 元 素 与 子孙 元 素 的 关系 、 兄 弟 元 素 之 间 
的 关系 等 。jQuery 中 DOM 相关 的 元 素 选择 方法 其 实 就 是 一 种 根据 元 素 关系 的 定位 方法 。 


19.1 获取 上 层 元 素 


所 谓 上 层 元 素 ， 是 指 一 个 元 素 的 父 元 素 、 父 元 素 的 父 元 素 等 ，jQuery 中 有 三 种 方法 可 用 来 获 
取 元 素 的 上 层 元 素 。 
19.1.1 parent() 方 法 

parent() 方 法 用 来 获取 一 个 元 素 的 直接 上 层 元 素 ， 也 就 是 父 元 素 。 这 个 方法 不 会 选择 更 外 层 的 
上 层 元 素 ， 虽 然 parent0 方 法 返回 的 只 是 一 个 元 素 ， 但 是 返回 值 也 是 使 用 数组 进行 包装 的 。 下 面 的 
例子 展现 了 如 何 利用 parent() 方 法 获取 直接 上 层 元 素 的 功能 。 
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【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" > 


<meta name="viewport" content="width=device-width. initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
.oneí 
width: 500px; 
height: 80px; 
border: 2px solid green; 
margin: 10px; 
b 
-twWof 
width: 350px; 
height: 60px; 
border: 2px solid green; 
margin: 10px; 
} 
„three{ 
width: 200px; 
height: 45px; 
border: 2px solid green; 
margin: 5px; 
} 
</style> 
</head> 
<body> 
<div class="one"> 
<div class="two"> 
<div class="three"></div> 
</div> 
</div> 
<script> 
var parent = $(".three").parent() 
console.log(parent); 
parent.css({"border":"2px solid red"}) 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 ， 使 用 $(".three").parent() 获 取 到 three 元 素 的 直接 上 层 父 元 素 (这 里 为 two 元 
K) 并 将 其 边框 设 定 为 红色 。 可 以 看 到 ， 最 终 的 效果 是 two 元 素 的 边框 被 设置 成 了 红色 ， 而 one 
元 素 的 边框 颜色 没有 发 生变 化 。 
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19.1.2 ”parents() 方 法 


parents() 方 法 返回 的 是 一 个 元 素 的 所 有 上 层 元 素 ， 即 包括 父 元 素 、 父 元 素 的 父 元 素 等 ， 这 个 上 
层 元 素 一 直到 <html> 根 元 素 。 下 面 是 一 个 HTML 结构 ， 通 过 Chrome 控制 台 来 看 一 下 这 个 HTML 
结构 中 son 元 素 的 parents() 方 法 的 返回 值 是 什么 样 的 。 


<body> 
<div class="parents"> 
<div class="parentl"></div> 
<div class="parent2"> 
<div class="son"></div> 
<div class="son"></div> 
</div> 
</div> 
</body> 








接 下 来 ， 通 过 parents() 方 法 获取 son 元 素 的 父 元 素 。 在 Chrome 控制 台 下 查看 返回 元 素 ， 如 图 
19-1 所 示 。 


s [div.parent2, div.parents, body, html, prevObject; init[2], context: document, selector: 


".son.parents()"] 





图 19-1 


可 以 看 到 ，son 元 素 通过 parents( 方 法 返回 的 上 层 元 素 包 含 4 个 元 素 : parent2 元 素 、parents 
元 素 、body 元 素 和 html 元 素 。 哪 些 元 素 是 一 个 元 素 的 上 层 元 素 ， 通 过 上 面 的 图 像 和 真正 返回 的 值 
相 比 对 就 可 以 明确 了 。 

需要 注意 的 是 ,parentl 元 素 虽然 位 于 son 元 素 的 上 级 ,但 是 它 并 不 包含 son 元素 ,因此 是 parents() 
方法 返回 不 了 的 。 就 好 比 parentl 和 parent2 是 两 个 部 分 的 leader， 但 是 son 元 素 是 parent2 部 分 的 ， 
因此 虽然 在 级 别 上 parentl 是 son 元 素 的 上 级 ， 但 是 parentl 和 son 元 素 其 实 没 有 直接 关系 。 

parents() 方 法 的 使 用 场景 是 , 当 开 发 者 想 获取 一 个 元 素 的 某 个 非 直 接 上 层 元 素 时 使 用 。parens() 
方法 比较 方便 的 一 点 是 ,由 于 一 个 元 素 每 一 级 上 层 元 素 只 有 一 个 元 素 , 因此 通过 索引 访问 某 一 级 元 
素 时 ， 直 接 传 入 的 索引 值 n 就 代表 要 选取 的 第 n 层 元 素 。 比 如 想 选取 第 三 层 上 级 元 素 ， 就 是 
parents(2)。 这 样 可 以 很 好 地 控制 元 素 的 选择 ， 不 至 于 层级 过 多 导致 元 素 选取 混乱 。 

下 面 的 例子 使 用 parents() 方 法 选取 特定 元 素 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" > 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

















<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
„parents í 
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Q; 


注 意 


width: 300px; 
height: 150px; 
border: 2px solid black; 
margin: 30px; 

} 

.parentl, .parent2{ 
display: inline-block; 
width: 80px; 
height: 80px; 
margin: 10px; 
border: 1px solid black; 


.soní 
width: 30px; 
height: 30px; 
background: green; 
} 
</style> 
</head> 
<body> 
<div class="parents"> 
<div class="parent1 "></div> 
<div class="parent2"> 
<div class="son"></div> 
</div> 
</div> 
<script> 
var parents = $(".son").parents() 
$(parents[1]).css({"border": "2px solid green" }); 
</script> 
</body> 
</html> 


19.1.3 parentsUntil() 方法 


数 ， 表 示 选 取 调 用 者 与 这 个 元 素 之 间 的 上 层 元 素 。 如 何 理解 这 个 方法 返回 


在 上 面 的 例子 中 ， 直 接 对 parents 变量 使 用 jQuery 中 的 方法 是 可 以 的 ， 因 为 parents() 方 
法 返回 的 是 一 个 jQuery 包装 的 元 素数 组 。 对 返回 值 直接 调用 jQuery 方法 会 对 数组 中 所 
有 元 素 使 用 jQuery 方法 。 如 果 使 用 Parents[1] 方 法 获取 某 个 元 素 ， 那 么 返回 的 是 HTML 
对 象 ， 还 需要 进行 jQuery 包装 才能 调用 jQuery 方法 ， 否 则 会 报错 。 


parentsUntil() 方 法 返回 的 是 两 个 元 素 之 间 的 所 有 上 层 元 素 , 这 个 元 素 需 要 传 入 一 个 元 素 作为 参 





HTML 代码 结构 : 


<body> 





的 元 素 呢 ? 给 定 一 段 
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<div class="parents"> 
<div class="parentl"></div> 
<div class="parent2"> 
<div class="son"> 
<ul> 
<li>li 元 素 1</li> 
<li>li 元 素 2</li> 
<li>li 元 素 3</li> 
<h> 
</div> 
</div> 
</div> 
</body> 


S$(0liD[0].parentsUntil(".parent2") 返 回 的 是 什么 元 素 呢 ? 在 Chrome 浏览 器 控制 台 下 ,输出 的 返回 
元 素 如 下 : 


ë [ul, div.son, prevObject: init[1], context: li, selector: 
".parentsUntil(.parent2)"] 





可 以 看 到 ， 返 回 的 元 素 为 ul 元 素 和 son 元 素 。 这 是 因为 ， 上 面 使 用 parentsUntil0 方 法 返回 的 元 
KH li CRM parent2 元 素 之 间 的 父 元 素 ， 从 DOM 结构 来 看 ， 就 是 son 元 素 和 ul 元 素 了 。 

如 果 parentsUntil0 方 法 传 入 的 参数 和 调用 的 元 素 之 间 不 包含 上 层 元 素 ， 或 者 不 传 入 元 素 参数 ， 
那么 返回 值 和 调用 parents() 方 法 一 样 ,会 返回 全 部 上 层 元 素 。 例 如 , 在 上 面 的 例子 中 , 当 传 入 parents1 
元 素 作为 参数 时 ， 就 会 返回 li 的 所 有 上 层 元 素 ， 因 为 li 元素 和 parents! 元 素 之 间 没 有 上 层 元 素 

(parentsl 元 素 不 是 li 的 直接 上 级 元 素 )。 





19.2 获取 后 代 元 素 


后 代 元 素 和 上 层 元 素 意义 相反 ， 即 获取 一 个 元 素 内 部 包含 的 子 元 素 。jQuery 中 有 两 个 方法 和 
获取 后 代 元 素 相关 。 
19.2.1 children() 方 法 


children() 方 法 返回 被 选 元 素 的 所 有 直接 子 元 素 。 这 个 方法 和 parent() 方 法 相对 应 ， 只 会 选择 下 
面 的 一 层 子 元 素 ， 而 不 会 进行 深度 的 遍历 。 下 面 的 例子 使 用 children0 方 法 为 子 元 素 添加 样式 ， 请 
观察 哪些 元 素 的 样式 被 修改 了 、 哪 些 元 素 的 样式 没有 被 修改 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" > 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
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<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
.parents{ 

width: 300px; 

height: 100px; 

border: solid 2px green; 
l 
.Son{ 

width: 150px; 

height: 50px; 

margin: 10px; 

border: 2px solid green; 
} 
„grandson í 

width: 30px; 

height: 30px; 

margin: 10px; 

background: green; 
} 
</style> 
</head> 
<body> 

<div class="parents"> 

<div class="son"> 
<div class="grandson"></div> 
</div> 

</div> 
<script> 
var children = $(".parents").children(); 
children.css( {"border": "2px solid red" }); 
</script> 
</body> 
</html> 


效果 如 图 19-2 所 示 。 


图 19-2 


在 这 段 代码 中 ， 使 用 children() 方 法 选取 了 parents 元 素 的 直接 子 元 素 son 元 素 ， 因 此 son 元 素 
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的 边框 颜色 变 为 红色 ， 而 其 更 下 层 的 后 代 元 素 grandson 元 素 并 没有 红色 的 边框 ， 说 明 children() 方 
法 只 会 获取 下 面 一 层 子 元 素 。 
children() 方 法 会 返回 一 个 数组 ， 这 个 数组 中 包括 调用 元 素 包含 的 所 有 直接 子 元 素 。 


19.22 find() 方 法 


想 获取 某 个 元 素 的 所 有 子 元 素 时 ， 可 以 使 用 find() 方 法 。find() 方 法 会 一 直 向 下 层 遍历 ， 获 取 每 
一 个 子 元 素 ， 直 到 没有 子 元 素 为 止 。 使 用 find() 不 同 于 parents() 方 法 ， 一 个 元 素 的 父 元 素 只 能 有 一 
个 ， 而 一 个 元 素 的 子 元 素 可 以 有 多 个 。 因 此 在 使 用 find() 方 法 获取 某 一 层 后 代 元 素 时 ， 不 能 再 像 使 
用 parents() 方 法 一 样 ， 只 通过 索引 来 简单 地 决定 想 要 获取 哪 一 层 后 代 元 素 。 

find() 方 法 需要 传 入 一 个 参数 ， 可 以 使 用 任何 元 素 的 选择 器 ， 表 示 要 获取 后 代 元 素 中 的 哪 一 些 
元 素 。 例 如 ，div.find(p) 表 示 的 就 是 获取 div 元 素 的 所 有 标签 名 为 p 的 后 代 元 素 。 如 果 想 单纯 地 获 
取 全 部 后 代 元 素 ， 也 可 以 使 用 * 选 择 器 ， 例 如 div.find(*) 获 取 到 的 就 是 div 元 素 的 所 有 后 代 元 素 。 
find() 方 法 返回 的 也 是 由 所 有 符合 条 件 的 元 素 组 成 的 jQuery 数组 。 

同样 是 上 面 的 例子 ， 现 在 使 用 find() 方 法 尝试 一 下 ， 看 看 效果 会 不 会 发 生变 化 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
.parents{ 
width: 300px; 
height: 100px; 
border: solid 2px green; 
; 
.soní 
width: 150px; 
height: 50px; 
margin: 10px; 
border: 2px solid green; 
} 
.grandson{ 
width: 30px; 
height: 30px; 
margin: 10px; 
background: green; 
b 
</style> 
</head> 
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<body> 
<div class="parents"> 
<div class="son"> 
<div class="grandson"></div> 
</div> 
</div> 
<script> 
var children = $(".parents").find('*'); 
children.css( {"border": "2px solid red" }); 
</script> 
</body> 
</html> 


打开 浏览 器 ， 效 果 如 图 19-3 所 示 。 


图 19-3 


可 以 看 到 ，parents 元 素 的 所 有 子 元素 都 变 成 了 红色 的 边框 ， 这 是 因为 find("*") 选 择 了 所 有 子 
元 素 。 


19.3 ”选择 兄弟 节点 


jQuery 中 提供 了 许多 用 来 进行 同 级 元 素 访问 的 方法 。 
19.3.1 siblings() 方 法 


siblings() 方 法 可 以 选取 到 某 一 个 元 素 的 所 有 同 级 元 素 ， 返 回 一 个 jQuery 元 素数 组 。siblings() 
方法 也 可 以 传 入 一 个 选择 器 参数 ， 用 来 筛选 出 符合 条 件 的 同 级 元 素 。 
siblings() 返 回 一 个 元 素 的 同 级 元 素 时 不 包括 原来 的 元 素 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 








<style type="text/css"> 
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</style> 
</head> 
<body> 
<div class="container"> 
<div class="target">div 元 素 </div> 
<span>span 元 素 1</span> 
<span>span 元 素 2</span> 
<p>p 元 素 </p> 
</div> 
<script> 
var target = $(".target").siblings(); 
console.log(target); 
target.css( {"border":"2px solid green"}); 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 , 使 用 siblings() 方 法 获取 到 target 元 素 的 所 有 兄弟 节点 , 并 为 它们 设 定 了 边框 
一 一 两 个 span 标签 和 一 个 p 标签 都 被 设 定 成 了 蓝 色 边框 。 接 下 来 ， 为 siblings() 方 法 传 入 参数 ， 看 
一 看 效果 的 变化 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script sre="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="target">div 元 素 </div> 
<span>span 元 素 1</span> 
<span>span 元 素 2</span> 
<p>p 元 素 </p> 
</div> 
<script> 
var target = $(".target").siblings('span'); 
console.log(target); 
target.css( ("border":"2px solid green"}); 
</script> 
</body> 
</html> 
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修改 后 , target 元 素 的 兄弟 节点 只 有 span 标签 的 边框 被 修改 成 了 红色 , 而 其 他 兄弟 节点 的 样式 


没有 发 生变 化 。 


和 其 他 方法 一 样 ， 如 果 想 获取 某 一 个 元 素 ， 可 以 使 用 索引 ， 但 是 所 返回 的 元 素 是 一 个 HTML 
对 象 。 如 果 想 使 用 jQuery 相关 方法 ， 就 需要 使 用 $0 进 行 元 素 封装 。 


19.3.2 ”next() 方 法 、nextAll() 方 法 和 nextUntil() 方 法 


next() 方 法 返回 某 个 元 素 的 下 一 个 同 级 元 素 。 注 意 ， 这 





里 只 返回 








紧 接着 的 下 一 个 同 级 元 素 。 


nextAll() 方 法 返回 的 是 某 个 元 素 后 面 跟着 的 所 有 同 级 元 素 。nextUntil() 方 法 可 以 传递 一 个 元 素 选择 





器 参数 ， 用 来 选择 两 个 元 素 之 间 的 同 级 元 素 。 
【示例 】 
<!IDOCTYPE> 
<html> 


<head> 
<meta charSet="utf-8" /> 


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 


<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 


<style type="text/css"> 
</style> 
</head> 
<body> 
<div class="container"> 
<p>p1 元 素 </p> 
<p>p2 元 素 </p> 
<p class="target">p3 元 素 </p> 
<p>p4 元 素 </p> 
<p>p5 元 素 </p> 
<p>p6 元 素 </p> 
<p>p7 元 素 </p> 
</div> 
<script> 
var target = $(".target").next(); 
target.css( {"border": "2px solid green"}); 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 ,使 用 next0) 获 取 3 号 元 素 的 下 一 个 元 素 ， 因 此 第 4 个 元 素 的 边框 被 设 定 成 了 


绿色 。 下 面 使 用 nextAll( 方 法 获取 同 级 元 素 。 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
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<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script sre="http://code .jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div class="container"> 
<p>pl 元 素 </p> 
<p>p2 元 素 </p> 
<p class="target">p3 元 素 </p> 
<p>p4 元 素 </p> 
<p>p5 元 素 </p> 
<p>p6 元 素 </p> 
<p>p7 元 素 </p> 
</div> 
<script> 
var target = $(".target").nextAll(); 
target.css( {"border": "2px solid green" }); 
</script> 
</body> 
</html> 


这 次 ， 从 4 号 元 素 到 7 号 元 素 都 被 设 定 成 了 绿色 边框 ， 因 为 nextAl1( 方 法 获取 到 3 号 元 素 后 
续 的 所 有 同 级 元 素 。 
下 面 使 用 nextUntil() 方 法 获取 3 号 元 素 和 6 号 元 素 之 间 的 p 元 素 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div class="container"> 

<p>p1 元 素 </p> 

<p>p2 元 素 </p> 

<p class="target">p3 元 素 </p> 

<p>p4 元 素 </p> 

<p>p5 元 素 </p> 

<p>p6 元 素 </p> 
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<p class="end">p7 元 素 </p> 

</div> 
<script> 
var target = $(".target").nextUntil(".end"); 
target.css( {"border": "2px solid green"}); 
</script> 
</body> 
</html> 
在 这 个 例子 中 ，4、5、6 三 个 元 素 的 边框 颜色 变 为 绿色 ， 其 他 元 素 边框 颜色 不 变 。 
与 next 系列 方法 相对 应 的 ， 向 前 获取 元 素 在 jQuery 中 也 有 对 应 的 方法 ， 分 别 是 prev0 方 法 、 

prevAll() 方 法 和 prevUntil() 方 法 ， 这 几 个 方法 的 用 法 和 next 系列 方法 完全 相同 。 


19.4 jQuery 与 JavaScript 的 DOM 选择 对 比 


jQuery 中 提供 了 丰富 的 通过 DOM 节点 之 间 的 关系 获取 元 素 的 方法 。 学 过 jQuery 中 的 方法 后 ， 
让 我 们 再 来 回顾 一 下 JavaScript 中 提供 的 DOM 节点 关系 选择 方法 。 

原生 的 JavaScript 中 只 有 如 下 几 个 和 节点 关系 相关 的 DOM 元 素 选 择 属性 : 

° 和 父子 节点 相关 的 属性 : parentNode 属性 和 childNodes 属性 。 

o 和 同 级 节点 相关 的 属性 : previousSibling 属性 和 nextSibling 属性 。 


与 JavaScript 相 比 , jQuery 首先 将 这 些 元 素 选 择 属性 封装 成 了 方法 ; 其 次 , jQuery 对 这 种 DOM 
节点 关系 选择 元 素 的 方式 进行 了 很 大 的 扩展 ， 让 开发 者 可 以 十 分 方便 地 根据 需要 获取 一 些 元 素 。 
例如 ， 下 面 的 这 段 HTML 结构 : 
<div id="container"> 
<div clsss="header"></div> 
<div clsss="main"> 
<ul> 
<li></li> 
<li></li> 
<li></li> 
<l> 
</div> 
<div clsss="footer"></div> 
</div> 


这 里 ， 我 们 想 通 过 container 元 素 获取 到 上 元 素 ， 如 果 是 原声 JavaScript 代码 ， 可 能 是 这 样 的 : 


var container = document.getElementByld("container"); 
var target = container.childNodes[2].childNodes[0].childNodes: 


这 样 的 代码 很 复杂 ， 需 要 多 次 调用 某 一 个 属性 来 一 层 一 层 地 获取 到 目标 元 素 。 如 果 使 用 
jQuery， 就 是 下 面 这 样 的 : 
var target = $("#coontainer") find("li") 
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可 以 看 到 ， 代 码 量 减少 了 不 少 ， 并 且 代 码 语义 更 加 清晰 了 。 
同样 的 ， 在 兄弟 节点 的 获取 上 ， 使 用 原生 JavaScript 属性 时 需要 逐 层次 获取 ， 而 在 jQuery 中 
可 以 更 加 简便 地 快速 获取 目标 元 素 。 


19.5 jQuery 中 其 他 DOM 节点 选择 方法 





jQuery 中 还 有 一 些 其 他 关于 元 素 选择 的 方法 ， 下 面 对 它 们 进行 介绍 。 
19.5.1 first() 和 last() 





first() 方 法 返回 被 选 元 素 中 的 第 一 个 元 素 。last() 方 法 返回 被 选 元 素 中 的 最 后 一 个 元 素 。 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script sre="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div class="container"> 

<p>p1 元 素 </p> 

<p>p2 元 素 </p> 

<p>p3 元 素 </p> 

</div> 

<script> 
$("p').first().css( {"border": "2px solid green"}); 
$("p')Jlast().css( "border": "2px solid red"}); 
</script> 
</body> 
</html> 


第 一 个 p 元 素 被 添加 了 绿色 边框 ,第 三 个 p 元 素 被 添加 了 红色 边框 , 这 就 是 first() 方 法 和 last() 
方法 的 筛选 元 素 功能 。 
19.5.2 eq() 

如 果 想 访问 一 些 元 素 中 间 的 某 几 个 元 素 , 在 jQuery 中 也 有 办 法 。eq() 方 法 传 入 一 个 索引 值 ， 表 
示 获 取 第 几 个 元 素 ， 索 引 值 从 0 开始 。 当 索引 值 传 入 0 时 ， 和 调用 first() 方 法 是 等 价 的 ， 当 索引 值 
传 入 n-1 时 ， 和 调用 last0 方 法 是 等 价 的 。 


316 | HTML5+jQuery Mobile 移动 应 用 开发 





eq() 方 法 也 可 以 传 入 负数 ， 传 入 -1 时 表示 选择 最 后 一 个 元 素 ， 和 使 用 last0 方 法 等 价 。 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div class="container"> 

<p>pl 元 素 </p> 

<p>p2 元 素 </p> 

<p>p3 元 素 </p> 

</div> 

<script> 
$("p").eq(1).css({"border": "2px solid green"}); 
</script> 
</body> 
</html> 


19.5.3 ”filter() 方 法 和 not() 方 法 


filtter() 方 法 可 以 用 来 筛选 元 素 。filter() 方 法 需要 传 入 一 个 选择 器 作为 参数 ， 返 回 从 一 些 元 素 中 
筛选 出 的 具有 选择 器 性 质 的 元 素 。not() 方 法 和 filter() 的 含义 正好 相反 ,也 需要 传 入 一 个 选择 器 作为 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div class="container"> 
<p>pl 元 素 </p> 
<p class="target">p2 元 素 </p> 
<p>p3 元 素 <Ip> 
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</div> 
<script> 
$("p").filter(".target").css({"border": "2px solid green"}); 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 , 使 用 filter() 方 法 在 所 有 p 元 素 中 找到 类 名 为 target 的 元 素 。not() 的 使 用 同 理 ， 
如 下 面 的 例子 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div class="container"> 

<p>p1 元 素 </p> 

<p class="target">p2 元 素 </p> 

<p>p3 元 素 </p> 

</div> 

<script> 
$("p").not(".target").css( {"border": "2px solid green"}); 
</script> 
</body> 
</html> 


在 这 段 代 码 中 使 用 了 not() 方 法 ， 结 果 为 不 带 有 target 类 名 的 元 素 被 设 定 成 了 绿色 边框 。 


jQuery 操纵 CSS 样式 


本 章 内 容 要 点 : 
* css() 方 法 一 直接 控制 元 素 样式 
其 他 CSS 方法 


在 原生 的 JavaScript 代码 中 ， 想 要 对 元 素 的 CSS 样式 进行 动态 操作 比较 困难 ， 其 中 只 有 少量 
的 方法 可 以 实现 对 CSS 样式 的 操作 。 在 jQuery 中 ,提供 了 丰富 的 对 Css 样式 操作 的 方法 ,使 用 这 
些 方法 动态 操纵 CSS 样式 ， 可 以 大 幅 提升 开发 效率 。 


20.1 css() 方 法 一 一 直接 控制 元 素 样 式 


在 jQuery 中 有 一 个 css() 方 法 , 顾名思义 ,这 个 方法 可 以 直接 对 一 个 元 素 的 各 个 CSS 属性 进行 
操作 。 


20.1.1 获取 某 个 元 素 的 CSS 属性 值 

如 果 想 获取 某 一 个 元 素 的 CSS 属性 值 ， 可 以 直接 向 css() 方 法 中 传 入 想 要 获取 的 属性 值 对 应 的 
属性 名 。 下 面 使 用 css0 返 回 元 素 的 属性 值 。 

【示例 】 


<!DOCTYPE> 
<html> 
<head> 
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<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
main{ 
background-color: green; 


width: 200px; 
height: 200px; 
border: 2px solid rbg(0, 0, 0); 
} 
</style> 
</head> 
<body> 
<div class="main"></div> 
<script> 
var border = $(".main").css("border") 
console.log(border); 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 ， 使 用 CSS 方法 返回 元 素 border 属性 值 ， 结 果 为 : 

2px solid rbg(0, 0, 0) 

这 是 一 个 字符 串 值 ， 内 容 就 是 在 CSS 中 为 元 素 设 定 的 对 应 属性 的 属性 值 。 

如 果 为 css() 方 法 传 入 的 属性 名 是 调用 该 方法 的 元 素 在 CSS 中 没有 设置 的 属性 ， 那 么 返回 的 结 
果 是 这 个 属性 的 默认 值 ， 而 不 是 undefined。 
20.1.2 ”设置 元 素 的 CSS 属性 

css() 方 法 主要 被 用 来 进行 元 素 CSS 属性 的 设置 。 如 果 相 对 某 个 元 素 的 一 个 属性 property 值 进 
行 设 定 ， 将 其 设 定 为 value， 可 以 使 用 如 下 代码 : 

element.css("property", "value") 

这 里 为 css0 方 法 传 入 了 两 个 参数 ， 第 一 个 参数 是 要 设置 属性 的 字符 串 值 ， 第 二 个 参数 是 要 设 
置 的 属性 值 。 在 下 面 的 例子 中 ， 单 击 不 同 的 按钮 ， 可 以 为 元 素 设 定 不 同 的 背景 颜色 。 

【示例 】 

<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 


<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 





<style type="text/css"> 
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-main{f 
background-color: green; 
width: 200px; 
height: 200px; 
border: 2px solid black; 
} 
</style> 
</head> 
<body> 
<div class="main"></div> 
<input value="red" type="button" id="red" /> 
<input value="green" type="button" id="green" /> 
<input value="yellow" type="button" id="yellow" /> 
<script> 
$("input").click(function(e){ 
$(".main").css("background-color", e.target.value); 


上 面 的 代码 效果 为 ， 单 击 不 同 的 按钮 ， 原 来 的 div 元 素 就 会 
切换 为 不 同 的 颜色 ， 如 图 20-1 所 示 。 
这 里 在 HTML 结构 中 定义 了 三 个 按钮 ， 每 个 按钮 对 应 不 同 的 
value 值 。 接 下 来 ， 使 用 jQuery 中 的 选择 器 获取 这 些 元 素 ， 并 且 绑 
定单 击 事件 。 每 次 单 击 某 一 个 按钮 ， 就 将 单 击 对 象 的 value 值 通过 
css() 方 法 设 定 为 元 素 的 background-color 属性 值 ， 从 而 实现 元 素 的 
背景 颜色 变化 。 
css() 方 法 还 可 以 同时 改变 一 个 元 素 多 个 属性 的 属性 值 。 如 果 
给 元 素 设 定 多 个 属性 值 ， 可 以 为 css() 方 法 传 入 一 个 键 值 对 组 成 的 red green [ yellow _ 
对 象 。 例 如 ， 同 时 改变 一 个 元 素 的 width 属性 值 和 height 属性 值 ， 
可 以 使 用 如 下 代码 实现 : 
element.css({"width": "100px", "height": "100px;"}) 
在 上 面 例子 的 基础 上 增加 改变 多 个 属性 值 的 功能 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 


<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 











图 20-1 


<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
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-main{f 
background-color: green; 
width: 200px; 
height: 200px; 
border: 2px solid black; 
} 
</style> 
</head> 
<body> 
<div class="main"></div> 
<input value="red" type="button" id="red" /> 
<input value="green" type="button" id="green" /> 
<input value="yellow" type="button" id="yellow" /> 
<script> 
$("input").click(function(e){ 
console.log(e.dataSize) 
$(".main").css( {"background-color": e.target.value, "width": "100px", "height": "100px" }); 
2) 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 ， 为 css0 方 法 传 入 了 一 个 对 象 ， 这 样 单 击 按钮 时 就 会 同时 改变 元 素 的 width 
属性 、height 属性 和 background-color 属性 。 
下 面 结合 css() 获 取 、 设 置 元 素 样式 的 功能 ， 制 作 一 个 可 以 逐渐 改变 元 素 大 小 的 例子 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
.main{ 
background-color: green; 
width: 50px; 
height: 50px; 
border: 2px solid black; 
} 
</style> 
</head> 
<body> 
<div class="main"></div> 
<button id="size"> 修 改 尺寸 </button> 
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<script> 
$("#size").click(function() í 
var sizeOrigin = $(".main").css("width").split('p')[0]; 
var sizeNew = sizeOrigin * 2; 
$(".main").css({"width": sizeNew + "px", "height": sizeNew + "px"}); 
1) 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 ， 当 单 击 “ 修 改 尺寸 ”按钮 时 ， 首 先 通 过 css() 方 法 获取 当时 元 素 的 width 属 
性 值 和 height 属性 值 ， 之 后 再 使 用 css() 方 法 为 元 素 设 定 放 大 后 的 尺寸 。 
在 下 面 的 例子 中 ， 可 以 根据 用 户 输入 的 宽度 或 高 度 对 元 素 的 样式 进行 设 定 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
.main{ 
background-color: green; 
width: 50px; 
height: 50px; 
border: 2px solid black; 
; 
</style> 
</head> 
<body> 
<div class="main"></div> 
<input placeholder=" 输 入 宽度 数值 " type="text"/> 
<input placeholder=" 输 入 高 度 值 " type="text" > 
<button id="size"> 修 改 尺寸 <button> 
<script> 
$("#size").click(function() í 
var width = $("input")[0].value + "px"; 
var height = $("input")[1].value + "px"; 
$(".main").css( ("height": height, "width": width}); 
1) 
</script> 
</body> 
</html> 
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20.2 其 他 CSS 方法 


在 jQuery 中 ， 还 对 一 些 常 用 的 样式 修改 方法 进行 了 单独 的 封装 ， 下 面 对 这 些 方 法 进行 简单 
介绍 。 


20.2.1 ”和 元 素 尺寸 相关 的 方法 


在 jQuery 中 有 两 个 方法 height0 和 width(), 可 以 直接 对 元 素 的 高 度 和 宽度 进行 设 定 , 而 无 须 使 
用 css0 方 法 进行 设 定 。 
在 下 面 的 代码 中 ， 使 用 height0 方 法 和 width() 方 法 直接 对 元 素 的 宽度 和 高 度 进行 设 定 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
.mainí 
background-color: green; 
width: 50px; 
height: 50px; 
border: 2px solid black; 
h 
</style> 
</head> 
<body> 
<div class="main"></div> 
<button id="size"> 修 改 尺寸 <button> 
<script> 
$("#size").click(function() í 
$('.main').width(200); 
$('.main').height(200); 


如 果 只 是 调用 了 width() 方 法 和 height() 方 法 ， 而 不 为 其 传递 参数 ， 就 会 返回 当前 元 素 的 宽度 或 
者 高 度 ， 这 与 直接 调用 element.css("width") 或 element.css("height") 是 相同 的 。 
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20.2.2 ”和 位 置 相关 的 方法 
1. position() 方 法 
psition() 方 法 可 以 返回 一 个 元 素 相对 于 父 元 素 的 偏 移 。 这 里 的 偏 移 指 的 是 一 个 元 素 在 父 元 素 中 
pE AE 对 应 的 ，position() 方 法 的 返回 值 是 一 个 对 象 ， 包括 距离 
元 素 上 边缘 的 距离 top 和 距离 父 元 素 左 边缘 的 距离 left, 











position() 方 法 是 不 能 对 元 素 的 位 置 进行 设 定 的 ， 是 一 个 只 能 返回 元 素 位 置信 息 的 属性 。 例 如 ， 
下 面 的 代码 展现 了 如 何 使 用 position() 方 法 获取 元 素 的 位 置 。 

【示例 】 

<!DOCTYPE> 

<html> 

<head> 


<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/ jquery- 1 .8.0.min.js"></script> 
<style type="text/css"> 
.mainí 
width: 500px; 
height: 500px; 
border: 2px solid black; 
position: relative; 
} 
.small í 
position: absolute; 
top: 100px; 
left: 200px; 
width: 100px; 
height: 100px; 
background: green; 
} 
</style> 
</head> 
<body> 
<div class="main"> 
<div class="small"></div> 
</div> 
<p class="position"></p> 
<script> 
var positionInfo = $('.small').position(): 
console.log(positionInfo) 
var positionTop = positionInfo.top; 
var positionLeft = positionInfo.left; 
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S$(".position").html(" 距 离 父 元 素 上 边缘 " + positionTop + "," + "距离 父 元 素 左边 缘 " + positionLeft); 
</script> 

</body> 

</html> 


2. offset() 方 法 


offset() 方 法 也 是 获取 元 素 的 位 置 ， 和 position() 方 法 不 同 的 是 ，offset() 方 法 获取 的 是 元 素 相对 
于 整个 文档 的 偏 移 ， 而 position() 方 法 获取 的 是 元 素 相对 于 父 元 素 的 偏 移 。 为 了 明晰 这 两 个 之 问 的 
区 别 ， 来 看 下 面 的 例子 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 

<style type="text/css"> 





aN 
margin: 0; 
padding: 0; 

; 

.mainí 
margin-top: 33px; 
margin-left: 55px; 
width: 500px; 
height: 500px; 
border: 2px solid black; 
position: relative; 

} 

„small í 
position: absolute; 
top: 100px; 
left: 200px; 
width: 100px; 
height: 100px; 
background: green; 

} 

</style> 

</head> 

<body> 


<div class="main"> 
<div class="small"></div> 
</div> 
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<p class="position"></p> 

<p class="offset"></p> 

<script> 

var positionInfo = $('.small').position(); 

var offsetInfo = $('.small').offset(); 

console.log(positionInfo) 

var positionTop = positionInfo.top; 

var positionLeft = positionInfo.left; 

var offsetTop = offsetInfo.top; 

var offsetLeft = offsetInfo. left; 

$(".position").html(" 距 离 父 元 素 上 边缘 " + positionTop + "," + "距离 父 元 素 左边 缘 " + positionLeft); 
S$(".offset").html(" 距 离 文档 上 边缘 " + offsetTop + "," + "距离 文档 左边 缘 " + offsetLeft); 
</script> 

</body> 

</html> 


在 上 面 的 代码 中 ， 分 别 使 用 offset0) 方 法 和 position() 方 法 获取 元 素 的 位 置信 息 。 可 以 看 到 ， 二 
者 的 返回 值 是 不 同 的 ，position() 返 回 的 值 就 是 元 素 距离 父 元 素 的 偏 移 量 ; offset() 方 法 的 返回 值 比 
position() 返 回 值 大 ， 因 为 offset0 计 算 的 偏 移 会 从 整个 界面 的 上 角 开 始 记 起 。 

offset() 方 法 和 position() 方 法 的 另 一 个 区 别 是 ，offset() 方 法 可 以 设 定 元 素 的 偏 移 。 使 用 offset() 
方法 为 元 素 设 定 偏 移 ， 需 要 传 入 一 个 对 象 ， 分 别 指定 元 素 距离 文档 左边 缘 和 上 边缘 的 像素 值 。 下 面 
的 例子 使 用 offset() 方 法 修改 元 素 的 偏 移 量 。 

【示例 】 

<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 

<style type="text/css"> 

让 























margin: 0; 
padding: 0; 

} 

.main{ 
margin-top: 33px; 
margin-left: 55px; 
width: 100px; 
height: 100px; 
border: 2px solid black; 
position: relative; 

i 

</style> 
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</head> 
<body> 
<div class="main"></div> 
<input type="text" placeholder=" 设 置 元 素 距 离 文档 上 边缘 偏 移 "/> 
<input type="text" placeholder=" 设 置 元 素 距 离 文 档 左边 缘 偏 移 "/> 
<button> 修 改 offset</button> 
<script> 
$('button').click(function() í 
var top = $("input")[0].value; 
var left = $("input")[1 ].value; 
$(".main").offset({ 
top: top, 
left: left 
» 
H) 
</script> 
</body> 
</html> 
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jQuery 中 的 动 


本 章 内 容 要 点 : 

* 基本 动画 效果 

前 端 页 面 的 交互 效果 好 坏 直接 关系 到 整个 Web 的 品质 。 对 于 移动 端 HTMLS 的 Web 应 用 ,页 
面 交互 效果 更 加 重要 。 在 前 面 的 CSS 章节 中 曾经 讲 过 很 多 实现 动画 效果 的 方法 ， 但 是 在 JavaScript 
中 实现 这 些 动画 效果 需要 许多 代码 。 好 在 jQuery 封装 了 许多 非常 常用 并 且 效 果 很 好 的 动画 方法 ， 
使 用 这 些 方法 ， 可 以 用 极 少量 的 代码 实现 多 种 多 样 的 动画 效果 。 


21.1 基本 动画 效果 


jQuery 中 为 元 素 提 供 了 丰富 的 元 素 动画 效果 ， 学 习 jQuery 中 这 些 和 动画 相关 的 效果 ， 可 以 让 
开发 者 很 方便 地 通过 调用 这 些 方 法 进行 开发 。 使 用 这 些 方法 可 以 节省 很 多 代码 量 , 而 且 实 现 的 方法 
也 比较 规范 。 

壁 如 拿 元 素 的 现实 和 隐藏 为 例 ， 如 果 使 用 原生 JavaScript 方法 ,就 需要 很 多 行 代码 ， 而 且 实 现 
方式 也 有 很 多 ， 开 发 者 不 知道 哪 种 实现 方法 不 会 导致 问题 。jQuery 为 开发 者 提供 的 显示 隐藏 方法 
是 比较 规范 的 ， 而 且 用 比较 少 的 代码 就 能 实现 。 


21.1.1 显示 和 隐藏 


显示 和 隐藏 是 最 基本 的 动画 效果 ， 在 jQuery 中 ， 要 想 实现 显示 和 隐藏 效果 非常 简单 。 使 用 
jQuery 对 象 的 元 素 调用 hide() 方 法 和 show() 方 法 即 可 。hide() 方 法 用 来 隐藏 元 素 ,show() 方 法 用 来 显 
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示 元 素 。 需 要 注意 的 是 ， 正 如 之 前 的 章节 所 讲 ， 要 想 使 用 jQuery 中 hide() 和 show() 方 法 ， 必 须 保 证 
调用 的 这 些 方法 的 元 素 是 一 个 jQuery 对 象 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
„container { 
width: 100px; 
height: 100px; 
background: green; 

; 
</style> 
</head> 
<body> 

<div class="container"> 

效果 展示 

</div> 

<button id="show"> 显 示 </button> 

<button id="hide"> 隐 藏 </button> 
<script> 
$("#show").click(function() í 

$(".container").show(); 
» 
$("#hide").click(function(){ 

$(".container").hide(); 
D 
</script> 
</body> 
</html> 


要 操作 的 对 象 是 class 为 container 的 div 元 素 。 下 面 定义 两 个 按钮 ， 其 中 一 个 用 于 显示 元 素 ， 
另 一 个 用 于 隐藏 元 素 。 每 次 单 击 相应 按钮 时 都 会 调用 hide() 或 者 show() 方 法 ， 使 得 元 素 切 换 显示 和 

jQuery 实现 这 个 隐藏 或 者 展示 的 效果 ， 其 实 是 设置 了 这 个 元 素 的 display 属性 。 当 调用 show() 
方法 时 ,jQuery 会 改变 元 素 的 display 属性 为 block， 从 而 使 元 素 显 示 。 当 调用 hide0 方 法 时 , jQuery 
会 将 display 属性 设置 为 none， 从 而 使 元 素 隐藏 。 

jQuery 中 的 hide() 方 法 和 show0 方 法 比 想象 的 复杂 。 试 想 一 下 ， 如 果 每 次 调用 show() 方 法 ,元 
素 的 display 属性 就 设置 为 block， 那么 对 于 那些 行内 元 素 而 言 , 隐藏 再 显示 会 不 会 使 得 页 面 的 布局 
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发 生 混乱 昵 ? (KX block 元 素 不 能 显示 在 同一 行 ， 而 inline 元 素 可 以 显示 在 同一 行 。 


的 例子 。 
【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet= "utf-8" > 


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 


<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
span{ 
width: 100px; 
height: 100px; 
background: green; 
display: inline-block; 
; 
</style> 
</head> 
<body> 
<span>A</span> 
<span>B</span> 
<span>C</span> 
<button id="show"> 显 示 </button> 
<button id="hide"> 隐 藏 </button> 
<script> 
$("#show").click(function()í 
$("span").show(); 
D 
$("#hide").click(function(){ 
$("span").hide(); 


) 来 看 下 面 


在 上 面 的 代码 中 ,使 用 了 span 标签 ,这些 元 素 是 行内 元 素 。 单 击 隐藏 再 显示 后 ， 开 发 者 发 现 ， 


元 素 的 位 置 并 没有 发 生变 化 ， 说 明 display 属性 并 没有 修改 为 block. 





其 实 ,jQuery 中 的 hide0 和 show() 方 法 会 根据 元 素 的 初始 display 属性 值 来 设置 展示 后 的 display 
属性 值 。 如 果 开 发 者 为 元 素 设 定 了 初始 的 display 属性 为 inline-block， 那 么 调用 元 素 的 show() 方 法 
后 ，display 属性 的 属性 值 仍然 是 inline-block， 这 样 就 再 也 不 用 担心 随意 调用 hide() 方 法 和 show() 





方法 会 影响 页 面 布局 了 。jQuery 已 经 为 函数 做 了 很 好 的 兼容 和 很 周到 的 考虑 。 
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21.1.2 淡 入 和 淡出 


jQuery 封装 了 淡 入 和 淡出 的 方法 ， 即 fadeIn() 和 fadeOut()。fade 系列 的 方法 可 以 让 元 素 逐 渐 展 
现 或 者 隐藏 ， 使 用 方法 和 hide()、show() 方 法 类 似 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
span{ 
width: 100px; 
height: 100px; 
background: green; 
display: inline-block; 
; 
</style> 
</head> 
<body> 
<span>A</span> 
<span>B</span> 
<span>C</span> 
<button id="show"> 显 示 </button> 
<button id="hide"> 隐 藏 </button> 
<script> 
$("#show").click(function() í 
$("span").fadeln(); 
D 
$("#hide").click(function(){ 
$("span").fadeOut(); 
D) 
</script> 
</body> 
</html> 


在 浏览 器 中 查看 ， 就 可 以 看 到 jQuery 中 为 开发 者 封装 的 淡 入 和 淡出 方法 。 

在 上 面 的 例子 中 ， 每 次 显示 和 隐藏 元 素 都 需要 按 不 同 的 按钮 。 其 实 ，jQuery 中 封装 了 
fadeToggle() 方 法 , 这 个 方法 可 以 实现 一 个 按钮 控制 淡 入 和 淡出 两 种 效果 。 每 次 调用 这 个 方法 , jQuery 
都 会 先 判断 目标 元 素 的 当前 状态 : 如 果 元 素 没有 显示 ， 就 会 让 其 显示 ; 如 果 元 素 处 于 可 视 状 态 ， 就 
会 让 其 隐藏 。 
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【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
span{ 
width: 100px; 
height: 100px; 
background: green; 
display: inline-block; 
J 
</style> 
</head> 
<body> 
<span>A</span> 
<span>B</span> 
<span>C</span> 
<button id="toggle"> 显 示 / 隐 藏 </button> 
<script> 
$("#toggle").click(function()í 
$("span").fadeToggle(); 
D 
</script> 
</body> 
</html> 
上 面 的 代码 就 实现 了 一 个 按钮 控制 元 素 的 淡 入 和 淡出 功能 。 其 实 ，jQuery 中 实现 元 素 的 淡 入 
淡出 效果 是 通过 改变 元 素 的 透明 度 来 实现 的 。 当 调用 fadeOut( 方 法 时 ， 元 素 的 透明 度 会 在 一 段 时 
间 内 由 1 变 为 0， 从 而 实现 淡出 的 效果 。 人 deIn() 方 法 的 原理 类 似 ， 只 是 将 元 素 的 opacity 属性 值 由 
0 逐渐 变 成 1。 
利用 改变 opacity 属性 值 的 原理 ,jQuery 中 还 有 一 种 实现 淡 入 淡出 效果 的 方法 ， 就 是 fadeTo()。 
fadeTo() 方 法 可 以 任意 定义 想 要 淡 入 淡出 的 效果 ， 即 最 终 静 止 时 的 opacity 值 。 此 外 ，fadeTo() 方 法 
还 可 以 传 入 一 个 字符 串 〈“slow” 或 者 “fast”) 来 表示 希望 的 淡 入 淡出 效果 是 快 还 是 慢 。 例 如 ， 
fadeTo("slow", 0.5) 就 表示 将 元 素 的 opacity 值 变 为 0.5, 并 且 变 化 的 速度 为 慢 速 变换 。 有 了 fadeTo()， 
就 可 以 很 方便 地 实现 各 种 定制 化 的 淡 入 淡出 效果 了 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
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<meta charSet= "utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
spaní 
width: 100px; 
height: 100px; 
background: green; 
display: inline-block; 
} 
</style> 
</head> 
<body> 
<span>A</span> 
<span>B</span> 
<span>C</span> 
<button id="show"> 显 示 </button> 
<button id="hide"> 隐 藏 </button> 
<script> 
$("#show").click(function() í 
$("span").fadeTo('slow', 1); 
D 
$("#hide").click(function(){ 
$("span").fadeTo('fast', 0.3); 
D 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 ， 单 击 显示 或 者 隐藏 按钮 ， 元 素 不 会 完全 隐藏 ， 而 是 到 一 个 开发 者 在 代码 中 
制定 的 透明 度 ， 并 且 可 以 通过 slow 和 fast 来 控制 元 素 渐变 效果 的 速度 。 


21.1.3 滑动 


在 jQuery 中 ， 可 以 使 用 slideUp0 方 法 和 slideDown() 方 法 实现 元 素 的 向 上 滑动 或 者 向 下 滑动 ， 
使 用 方法 和 之 前 介绍 的 动作 函数 类 似 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 





<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
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Span{ 
width: 100px; 
height: 100px; 
background: green; 
display: inline-block; 
} 
</style> 
</head> 
<body> 
<span>A</span> 
<span>B</span> 
<span>C</span> 
<button id="up"> 展 开 </button> 
<button id="down"> 收 起 </button> 
<script> 
$("#up").click(function(){ 
$("span").slideDown(); 
D 
$("#down").click(function() { 
$("span").slideUp(); 
HD 
</script> 
</body> 
</html> 


在 上 面 的 例子 中 ， 每 当 单 击 “ 展 开 ” 时 ， 对 应 的 元 素 就 回 展开 ; 单 击 “ 收 起 ”时 ， 对 应 的 元 
与 fade 类 似 ，slide 也 包含 一 个 slideToggle0 方 法 ， 用 来 实现 一 个 按钮 控制 元 素 的 展开 和 收 起 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
span{ 
width: 100px; 
height: 100px; 
background: green; 
display: inline-block; 
上 
</style> 
</head> 
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<body> 
<span>A</span> 
<span>B</span> 
<span>C</span> 
<button id="toggle"> 展 开 / 收 起 </button> 

<script> 

$("#toggle").click(function(){ 
$("span").slideToggle(); 

HD 

</script> 

</body> 

</html> 


slide 相关 方法 的 原理 是 为 元 素 添加 height 
画 效果 。 


21.2 





属性 ， 通 过 改变 元 素 的 height 





复杂 动画 效果 


属性 来 实现 滑动 的 动 


上 而 介绍 了 许多 基本 动画 效果 ， 这 些 方法 使 用 起 来 非常 简单 ， 但 是 功能 很 有 限 ， 并 不 能 满足 


动画 效果 的 全 部 需求 。 


jQuery 中 提供 了 animate() 方 法 ， 可 以 让 开发 者 自己 定义 动画 效果 。 
animate() 方 法 定义 的 动画 效果 主要 是 通过 改变 元 素 的 CSS 属性 来 实现 的 。 首 先 , 每 一 个 HTML 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 


<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 


<style type="text/css"> 

#animation{ 
background: green; 
width: 100px; 
height: 100px; 
opacity: 1; 
position: absolute; 
top: 100px; 


的 元 素 都 有 一 个 初始 的 静止 状态 ， 这 种 状态 下 的 各 种 样式 就 是 通过 静态 的 CSS 代码 实现 的 。 
animate() 方 法 中 需要 传 入 的 就 是 另 一 个 静止 状态 时 元 素 的 CSS 属性 及 属性 值 ， 这 个 静止 状态 叫 作 
终止 状态 。 定 义 好 了 初始 状态 和 终止 状态 之 后 ，animate() 方 法 就 会 自动 地 从 初始 状态 按照 一 定 的 动 
画 效果 过 渡 到 终止 状态 ， 下 面 是 一 个 最 基本 的 例子 。 
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left: 100px; 
} 
</style> 
</head> 
<body> 
<div id="animation"></div> 
<script> 
$("#animation").click(function(){ 
$("#animation").animate({ 
left: '250px', 
opacity: '0.5', 
height: '180px', 
width: '180px' 
n 
H 
</script> 
</body> 
</html> 


animate() 方 法 需要 传 入 一 个 由 多 个 键 值 对 所 组 成 的 对 象 , 这 些 键 值 对 每 一 条 都 定义 了 元 素 的 某 
一 条 CSS 属性 和 属性 值 ， 它 们 组 合 起 来 就 是 这 个 元 素 要 过 渡 到 的 终止 状态 。 
打开 浏览 器 ， 查 看 效果 ， 当 单 击 绿色 div 元 素 时 ， 元 素 发 生 了 相对 复杂 的 动画 效果 变化 。 


传 入 CSS 属性 名 时 要 使 用 驼峰 名 。 比 如 在 CSS 中 的 padding-top 属性 , 在 jQuery 中 就 要 
注意 s 成 paddingTop 的 形式 。 


下 面 是 另 一 个 例子 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
#animation{ 
background: green; 
width: 100px; 
height: 100px; 
} 
</style> 
</head> 
<body> 
<div id="animation"></div> 
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<script> 
$("#animation").click(function(){ 
$("#animation").animate({ 
left: '250px', 
opacity: '0.5', 
height: '180px', 
width: '180px' 
D 
1) 
</script> 
</body> 
</html> 


上 面 的 例子 是 在 之 前 的 代码 下 修改 的 ， 删 去 了 部 分 CSS 代码 。 这 里 删除 了 初始 状态 中 定义 的 
opacity GEHE) 属性 和 关于 位 置 定 义 的 属性 。 打 开 浏 览 器 查看 效果 ， 可 以 发 现 元 素 只 有 透明 度 发 


生 了 变化 ， 而 位 置 并 没有 变化 ， 也 没有 产生 动画 效果 。 





这 是 一 个 新 手 容易 出 错 的 地 方 ， 其 实 理解 这 里 并 不 难 。animate 方法 中 传 入 的 CSS 属性 
和 属性 值 直接 对 应 地 放 到 定义 的 CSS 代码 中 ， 就 是 最 后 的 效果 。 在 上 面 的 代码 中 ， 即 便 在 
初始 状态 没有 设 定 元 素 的 opacity 属性 时 ， 终 止 状态 设 定 opacity 属性 为 0.5 也 是 可 以 产生 效 
果 的 。 反 之 ， 在 初始 状态 中 没有 设 定 和 位 置 有 关 的 属性 ， 即 没有 为 元 素 指定 position 属性 ， 
即便 在 终止 状态 加 入 了 top 和 left 属性 值 , 这 些 值 也 是 不 起 作用 的 。 这 其 实 是 一 个 CSS 问题 ， 
新 手 在 使 用 jQuery 编写 动画 效果 时 ， 很 容易 掉 入 这 个 “ 坑 ” 中 。 


在 上 面 的 例子 中 , 一 旦 单 击 了 一 次 元 素 后 , 再 次 单 击 元 素 , 元 素 的 状态 就 不 变 了 。 因 为 在 jQuery 
代码 中 ， 已 经 指定 好 了 终止 状态 的 CSS 各 项 属性 值 ， 当 单 击 一 次 元 素 ， 元 素 到 达 指定 状态 后 ， 再 


单 击 元 素 自然 就 没有 效果 了 。jQuery 中 的 animate() 方 法 还 可 以 传 入 相对 值 ， 具 体例 子 如 下 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" > 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
#animation{ 
background: green; 
width: 100px; 
height: 100px; 
opacity: 1; 
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top: 100px; 
left: 100px; 
i 
</style> 
</head> 
<body> 
<div id="animation"></div> 
<script> 
$("#animation").click(function(){ 
$("#animation").animate({ 
left: '250px', 
opacity: '0.5', 
height: '+=50px', 
width: '+=50px' 
» 
六 
</script> 
</body> 
</html> 


在 上 面 的 例子 中 ， 传 入 animate() 方 法 中 的 CSS 属性 ，height 属性 和 width 属性 使 用 了 “+=” 
符号 。 这 是 jQuery 中 特有 的 方法 ， 表 示 每 次 指定 animate() 方 法 时 ， 元 素 的 宽度 和 高 度 都 会 增加 50 
像素 。 这 种 方法 很 灵活 ， 还 可 以 自己 加 入 判断 ， 让 元 素 可 以 始终 进行 动画 变换 。 

【示例 】 

<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 

<style type="text/css"> 


#animation{ 
background: green; 
width: 100px; 
height: 100px; 
opacity: 1; 
top: 100px; 
left: 100px; 

} 

</style> 

</head> 

<body> 


<div id="animation"></div> 
<script> 
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var count = 0; 
$("#animation").click(function() í 
iflcount < 5){ 
$("#animation").animate( { 
left: '250px', 
opacity: '0.5', 
height: '+=50px', 


width: '+=50px' 
D 
count +; 
yelse { 
$("#animation").animate( { 
left: '250px', 
opacity: '0.5', 
height: '=50px', 
width: '=50px' 
) 
Count --; 
} 
D 
</script> 
</body> 
</html> 


我 们 为 代码 增加 了 一 些 功能 ， 制 定 了 一 个 cout 变量 ， 用 来 控制 div 的 变化 ， 以 免 元 素 过 大 。 
当 单 击 超过 五 次 时 ， 元 素 就 向 着 缩小 的 方向 变化 ， 控 制 元 素 在 一 定 大 小 。 

在 后 面 的 学 习 中 ， 还 可 以 使 用 一 些 其 他 jQuery 中 的 CSS 方法 和 这 个 例子 相 结 合 ， 打 造 出 交互 
性 能 很 强 的 前 端 应 用 。 

之 前 介绍 的 一 直 都 是 如 何 定义 终止 状态 ， 并 没有 关注 起 始 状态 到 终止 状态 的 过 渡 如 何 控制 。 
animate() 方 法 还 可 以 传 入 第 二 个 参数 ， 用 于 定义 这 个 过 渡 过 程 的 速度 情况 。 第 二 个 参数 可 以 传 入 如 
下 两 种 参数 : 

° 字符 串 ，slow 或 者 fast. 

° 毫秒 数 ， 表 示 由 起 始 状态 到 终止 状态 的 过 渡 时 间 。 


当 定 义 为 毫秒 数 时 ， 时 间 越 短 ， 动 画 效 果 的 变化 越 快 。 
【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" > 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 

<style type="text/css"> 
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.animate{ 
background: green; 
width: 100px; 
height: 100px; 
opacity: 1; 
top: 100px; 
left: 100px; 
margin-top: 50px; 

} 

</style> 

</head> 

<body> 


<div class="animate" id="animate1 "></div> 
<div class="animate" id="animate2"></div> 
<script> 
var count = 0; 
$("#animate1").click(function() í 
$("#animatel").animate( í 
left: '250px', 
opacity: '0.5', 
height: '180px', 
width: '180px' 
}, 1000) 
D: 
$("#animate2").click(function() í 
$("#animate2").animate( { 
left: '250px', 
opacity: '0.5', 
height: '180px', 
width: '180px' 
}, 3000) 
I; 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 ,为 了 让 效果 明显 ， 定 义 了 两 个 样式 、 动 画 完 全 相同 的 div 元 素 , 不 同 的 是 第 
一 个 元 素 的 过 渡 时 间 为 1000 毫秒 , 第 二 个 元 素 的 过 渡 时 间 为 3000 毫秒 。 在 浏览 器 中 查看 元 素 的 动 
画 效 果 ， 可 以 清晰 地 看 出 animate() 方 法 的 时 间 参 数 是 如 何 影响 元 素 动画 效果 的 。 

animate() 方 法 还 可 以 传 入 第 三 个 方法 , 就 是 回调 函数 , 这 个 回调 函数 会 在 动画 执行 完成 时 自动 
调用 。 回 调 函 数 的 使 用 场景 很 多 ， 也 十 分 灵活 ， 可 以 根据 需要 进行 设 定 。 比 如 ， 在 一 个 移动 Web 
应 用 中 ， 希 望 当 欢迎 界面 的 动画 效果 结束 时 跳 转 到 内 容 页 面 ， 就 可 以 使 用 animate() 方 法 附加 一 个 
回调 函数 来 实现 。 
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【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 


<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 


<style type="text/css"> 
.animatef 
background: green; 
width: 100px; 
height: 100px; 
opacity: 1; 
top: 100px; 
left: 100px; 
margin-top: 50px; 
} 
</style> 
</head> 
<body> 
<div class="animate" i nimatel"></div> 
<div class="animate" id="animate2"></div> 





<script> 
var count = 0; 
$("#animate 1").click(function() í 
$("#animatel").animate( í 
left: '250px', 
opacity: '0.5', 
height: '180px', 
width: '180px' 
}, 1000, function() í 
$("#animate2").animate( í 
left: '250px', 
opacity: '0.5', 
height: '180px', 
width: '180px' 
}, 3000) 
已 
J); 
</script> 
</body> 
</html> 


上 面 的 代码 中 ， 在 第 一 个 元 素 的 动画 效果 执行 完毕 后 ， 添 加 了 一 个 回 








调 函数 ， 这 个 回 


342 | HTML5+jQuery Mobile 移动 应 用 开发 





会 自动 执行 第 二 个 元 素 的 动画 效果 。 最 后 的 效果 是 , 第 一 个 元 素 的 动画 效果 和 第 二 个 元 素 的 动画 效 
果 依 次 执行 。 
回调 函数 非常 灵活 ， 熟 练 使 用 回调 函数 可 以 实现 很 多 惊人 的 效果 。 








21.3 jQuery 中 的 动画 队列 


很 多 时 候 ， 和 希望 实现 的 动画 效果 是 非常 复杂 的 ， 这 种 复杂 的 动画 效果 是 一 个 animate() 方 法 无 
法 实现 的 。jQuery 中 提供 了 动画 队列 的 方式 ， 所 谓 动画 队列 ， 就 是 按 顺 序 定义 多 个 animate() 方 法 ， 
每 个 animate() 方 法 可 以 按照 顺序 依次 执行 ， 形 成 动画 队列 。 

动画 队列 的 意义 在 于 将 多 个 动画 按照 一 定 的 次 序 分 别 执行 ， 这 样 就 可 以 轻松 地 用 代码 编写 一 
些 复杂 的 动画 效果 了 。 

【示例 】 

<!DOCTYPE> 

<html> 

<head> 


<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 





<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
.animate{ 
background: green; 
width: 100px; 
height: 100px; 
opacity: 1; 
top: 100px; 
left: 100px; 
margin-top: 50px; 
} 
</style> 
</head> 
<body> 
<div class="animate" id="animate"></div> 
<script> 
var count = 0; 
$("#animate").click(function( í 
$("#animate").animate( {left: '250px', opacity: '0.5'}); 
$("#animate").animate( {width: '180px', height: '180px'}); 
H 
</script> 
</body> 
</html> 
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上 面 的 代码 将 之 前 例子 中 的 动画 效果 使 用 动画 队列 的 方式 进行 了 分 解 。 定 义 多 个 animate() 方 
法 ， 这 些 animate() 方 法 所 定义 的 动画 效果 会 按照 定义 的 顺序 依次 执行 。 在 浏览 器 中 查看 效果 ， 可 
以 看 到 元 素 首先 向 右 平移 并 且 改 变 了 透明 度 。 这 个 动画 效果 执行 结束 之 后 , 元素 的 宽度 和 高 度 发 生 
了 变化 。 

如 果 存 在 多 个 元 素 ， 这 种 动画 队列 又 将 是 什么 样 的 表现 形式 呢 ? 来 看 下 面 的 例子 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script sre="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
.animatef 
background: green; 
width: 100px; 
height: 100px; 
opacity: 1; 
top: 100px; 
left: 100px; 
margin-top: 50px; 
} 
</style> 
</head> 
<body> 
<div class="animate" id="animatel"></div> 





<div class="animate" id="animate2"></div> 
<script> 
var count = 0; 
$("#animate1").click(function()í 
$("#animatel").animate( í 
left: '250px', 
opacity: '0.5', 
height: '180px', 
width: '180px' 
D: 
$("#animate2").animate( í 
left: '250px', 
opacity: '0.5', 
height: '180px', 
width: '180px' 
H: 
1); 
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</script> 
</body> 
</html> 


上 面 的 例子 沿用 了 之 前 回调 函数 的 示例 。 这 里 将 之 前 例子 中 的 回调 函数 中 对 第 二 个 元 素 的 动 
画 效果 设置 修改 为 和 第 一 个 元 素 的 动画 效果 方式 按 序 定义 。 打开 浏览 器 查看 效果 , 可 以 发 现 两 个 元 
素 是 同时 产生 动画 效果 的 。 

这 是 因为 对 于 每 一 个 元 素 ，jQuery 都 会 为 其 定义 一 个 动画 队列 。 每 次 触发 元 素 的 动画 效果 时 
jQuery 都 会 读 取 队 列 中 每 个 元 素 定义 的 动画 效果 ， 并 依次 执行 。 在 上 面 的 例子 中 ， 两 个 元 素 分 别 
存在 两 个 不 同 的 动画 队列 中 ， 它 们 之 间 是 互 不 影响 的 。 因 此 ， 当 元 素 发 生动 画 效果 的 变化 时 ， 二 者 
是 同时 变化 的 。 








21.4 停止 动画 


jQuery 中 的 stop() 方 法 可 以 让 用 户 随时 停止 当前 的 动画 效果 ， 下 面 是 一 个 简单 的 例子 。 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
.animate{ 
background: green; 
width: 100px; 
height: 100px; 
opacity: 1; 
top: 100px; 
left: 100px; 
margin-top: 50px; 
position: absolute; 
} 
</style> 
</head> 
<body> 
<div class="animate" id="animate"></div> 
<button id="stop"> 停 止 动画 </button> 
<script> 
Var count = 0; 
$("#animate").click(function() í 


| 345 


第 21 章 jQuery 中 的 动画 效果 





$("#animate").animate( {left: '250px', opacity: '0.5'}, 2000); 
$("#animate").animate( (width: '180px', height: '180px'}, 2000); 
)); 
$("#stop").click(function0) í 
$("#animate").stop(); 


为 了 让 元 素 的 变化 效果 更 加 明显 ， 这 里 将 元 素 每 段 动 画 的 持续 时 间 都 设 定 为 2 秒 钟 。 可 以 看 
到 ， 要 想 调用 stop() 方 法 ， 只 需要 指定 想 要 停止 动画 的 元 素 即 可 。 这 是 jQuery 封装 好 的 ， 对 于 每 一 
个 jQuery 对 象 都 可 以 调用 stop() 方 法 来 停止 动画 。 

打开 浏览 器 查看 效果 ， 可 以 发 现在 元 素 运动 的 第 一 阶段 〈 元 素 位 置 和 透明 度 发 生 改变 ) 调用 
stop() 方 法 时 ， 元 素 停 止 了 位 置 和 透明 度 的 变化 ， 接 下 来 继续 指定 宽度 和 高 度 变化 的 动画 效果 。 其 
实 ，stop() 方 法 在 默认 情况 下 只 会 暂停 元 素 的 当前 动画 效果 。 之 前 说 过 ， 每 一 个 元 素 在 jQuery 中 都 
有 一 个 动画 队列 ，stop() 方 法 暂停 了 当前 的 动画 效果 , 但 是 如 果 动 画 队 列 中 还 有 下 一 个 动画 效果 时 ， 
jQuery 就 会 继续 让 元 素 执 行动 画 队列 中 的 下 一 个 动画 效果 。 

这 里 的 关键 在 于 stop() 方 法 的 第 一 个 参数 。 这 个 参数 是 一 个 布尔 类 型 值 ， 用 来 指定 是 暂停 动画 
队列 中 的 所 有 动画 还 是 只 暂停 动画 队列 中 的 当前 动画 。 默 认 值 是 false， 即 暂停 当前 动画 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
.animatef 
background: green; 
width: 100px; 
height: 100px; 
opacity: 1; 
top: 100px; 
left: 100px; 
margin-top: 50px; 
position: absolute; 
} 
</style> 
</head> 
<body> 
<div class="animate" id="animate"></div> 
<button id="stop"> 停 止 动画 </button> 


346 | HTML5+jQuery Mobile 移动 应 用 开发 





<script> 
var count = 0; 
$("#animate").click(function() í 
$("#animate").animate( (left: '250px', opacity: '0.5'}, 2000); 
$("#animate").animate( {width: '180px', height: '1 80px'}, 2000); 
1); 
$("#stop").click(function0) í 
$("#animate").stop(true); 
D) 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 ， 为 stop() 方 法 传 入 的 第 一 个 参数 为 true， 也 就 是 说 ， 每 次 单 击 “ 暂 停 ”按钮 
时 都 会 暂停 所 有 动画 。 打 开 浏 览 器 ， 查 看 与 之 前 效果 的 不 同 ， 可 以 发 现 ， 单 击 “ 暂 停 ” 按 钮 后 ， 元 
素 的 第 二 阶段 变化 也 不 进行 了 ， 这 就 是 stop() 方 法 第 一 个 参数 的 作用 。 

stop() 方 法 还 有 第 二 个 参数 ， 用 来 控制 当 停止 动画 效果 时 元 素 是 否 直接 变 到 动画 队列 中 当前 动 
画 执行 完成 后 的 最 终 状 态 。 默 认 值 是 false， 表 示 不 进行 变化 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
.animatef 
background: green; 
width: 100px; 
height: 100px; 
opacity: 1; 
top: 100px; 
left: 100px; 
margin-top: 50px; 
position: absolute; 
} 
</style> 
</head> 
<body> 
<div class="animate" id="animate"></div> 
<button id="stop"> 停 止 动画 </button> 
<script> 
var count = 0; 
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S$("#animate").click(functionO{ 
S$("#animate").animate( {left: '250px', opacity: '0.5'}, 2000); 
$("#animate").animate( (width: '180px', height: '180px'}, 2000); 

D 

$("#stop").click(function(){ 
$("#animate").stop(true, true); 


对 比 上 面 的 例子 和 之 前 的 例子 , 可 以 发 现 , 当 stop() 方 法 的 第 二 个 参数 指定 为 true 时 , 单 击 “ 暂 
亭 ”按钮 ， 不 论 当 前 的 动画 执行 到 什么 时 候 ， 元 素 都 可 以 变化 为 当前 动画 队列 执行 完毕 后 的 状态 。 
这 其 实 是 为 了 满足 “快速 执行 完毕 动画 效果 ”的 需求 。 

熟练 掌握 jQuery 中 的 动画 效果 知识 ， 可 以 为 H5 页 面 开发 打下 很 好 的 基础 。 在 H5 页 面 中 ， 很 
重要 的 一 点 就 是 界面 的 交互 性 。jQuery 中 的 动画 效果 方法 为 H5 的 界面 交互 开发 提供 了 方便 、 规 范 
I 开发 方法 。 





jQuery 中 的 AJAX 


本 章 内 容 要 点 : 
* 理解 AJAX 原理 
3 掌握 AJAX 的 使 用 


AJAX 是 前 端 开发 中 最 重要 的 内 容 之 一 , 因为 只 要 涉及 数据 , 在 前 端 大 多 数 情况 下 都 是 需要 使 
用 AJAX 进行 与 后 台 之 间 的 数据 读 取 的 。 

AJAX 指 的 是 异步 JavaScript 和 XML， 可 以 不 用 理解 这 个 解释 的 含义 ， 从 最 平常 的 例子 来 说 
当 浏 览 一 个 网 页 的 时 候 ， 需 要 提交 各 种 类 型 的 表单 数据 ， 比 如 用 户 注册 、 用 户 登 录 等 信息 。 以 用 户 
登录 这 一 应 用 场景 为 例 ， 当 用 户 输入 用 户 名 、 密 码 和 验证 码 ， 单 击 提交 之 后 ,页 面 需 要 按 顺 序 进行 
如 下 操作 : 


(1) 在 前 端 进行 验证 码 验证 ， 判 断 输入 的 验证 码 是 否 正确 。 

(2) 验证 码 验证 通过 后 ， 将 用 户 名 和 密码 发 送 到 服务 器 端 进行 处 理 。 

(3) 服务 器 端 查找 用 户 名 是 否 存在 ， 如 果 用 户 名 不 存在 ， 就 在 前 端 页 面 中 显示 提示 信息 : 用 
户 名 不 存在 。 

(4) 用 户 名 存在 的 话 ， 服 务 器 端 从 数据 库 读 取出 该 用 户 名 对 应 的 密码 ， 与 浏览 器 传递 过 来 的 
密码 进行 比 对 。 如 果 比 对 通过 ， 就 说 明 用 户 名 输入 的 密码 正确 ， 登 录 成 功 ， 跳 转 到 登录 成 功 后 的 页 
面 ， 如果 密码 错误 ， 浏 览 器 就 会 进行 信息 提示 : 密码 错误 。 

上 面 的 4 个 过 程 中 ， 在 最 原始 的 Web 开发 时 ， 每 次 用 户 输入 完 信息 单 击 提交 之 后 ， 页 面 都 需 
要 进行 刷新 跳 转 ， 才 能 返回 用 户 名 和 密码 是 否 正 确 的 结果 。 试 想 ， 表 单 的 信息 量 很 大 ， 而 每 次 按照 
传统 方法 提交 表单 都 需要 刷新 页 面 ,如 果 内 容 填 写 错误 , 还 需要 重新 填写 所 有 信息 ,这 是 非常 不 可 
取 的 做 法 ， 而 且 用 户 体验 非常 差 。 
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使 用 AJAX 就 可 以 解决 上 面 的 问题 ，AJAX 是 浏览 器 和 服务 器 之 间 的 中 介 。 当 使 用 AJAX 进 
行 数据 提交 时 , 浏览 器 提交 数据 到 服务 器 , 服务 器 返回 响应 数据 的 整个 过 程 是 不 需要 任何 页 面 刷新 
的 ， 从 而 实现 了 异步 操作 。 这 也 是 目前 AJAX 被 广泛 应 用 的 重要 原因 。 

在 HTML5 应 用 开发 的 过 程 中 ， 使 用 AJAX 的 意义 更 加 重要 。HS5 应 用 很 重要 的 一 点 就 是 要 减 
少 页 面 刷新 的 次 数 ， 从 而 提升 整体 应 用 的 质量 和 交互 效果 。 

使 用 原生 的 JavaScript 就 可 以 实现 AJAX， 但 是 传统 JavaScript 实现 AJAX 比较 复杂 ， 而 且 需 
要 自己 编写 大 量 代码 。jQuery 中 为 开发 者 封装 好 了 几 个 非常 好 用 的 AJAX 方法 ， 使 用 这 些 方法 可 
以 很 方便 地 进行 AJAX 的 数据 传输 。 

在 开始 本 章节 的 学 习 之 前 ， 建 议 阅 读 一 些 nodejs 的 相关 内 容 ， 因 为 AJAX 涉及 后 端 代码 的 实 
现 ， 本 章 的 许多 例子 都 需要 使 用 后 台 的 代码 。 





224 环境 搭建 


在 开始 本 章 的 学 习 之 前 ， 首 先进 行 服务 器 端 nodejs 环境 的 搭建 。 在 项 目 目录 下 执行 如 下 命令 
(需要 先 安装 nodejs 和 express 脚手架 工具 ， 请 参考 node.js 章节 ) : 

npm init 

express 

npm install 

其 中 ，npm init 用 来 进行 目录 的 npm 初始 化 ，express 使 用 的 是 express 脚手架 工具 ， 用 来 快速 
搭建 一 个 服务 器 。npm install 命令 用 来 安装 pacakge.json 文件 中 所 依赖 的 各 种 npm 模块 包 。 

在 命令 行 中 执行 如 下 命令 进行 服务 运行 : 

node bin/www 


打开 浏览 器 ， 输 入 网 址 localhost:3000， 如 果 看 到 如 图 22-1 所 示 的 页 面 ， 就 说 明 开发 者 的 项 目 
环境 初始 化 搭建 成 功 了 。 





Express 


Welcome to Express 





图 22-1 
项 目 目录 介绍 
如 果 已 经 看 过 node.js 相关 章节 ， 对 express 脚手架 搭建 的 项 目 目录 应 该 不 会 陌生 了 。 没 看 过 
nodejs 相关 章节 也 没关系 ， 这 里 不 需要 知道 具体 的 目录 结构 原理 ， 只 需要 知道 开发 者 在 什么 地 方 
做 什么 样 的 代码 实验 即 可 。 
在 routes/index.js 文件 中 ， 编 写 所 有 和 路 由 相关 的 代码 ， 浏 览 器 传输 的 数据 都 会 交 由 这 个 文件 
中 对 应 的 路 由 代码 处 理 。 
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在 public/ 目 录 下 ， 创 建 ajax.html 文件 ， 引 入 jQuery 库 ， 代 码 如 下 : 
<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 

<style type="text/css"> 

</style> 

</head> 

<body> 

AJAX 代码 

<script> 

</script> 

</body> 

</html> 


打开 浏览 器 ， 输 入 网 址 http://localhost:3000/ajax.html， 如 果 能 正常 显示 这 个 页 面 ， 就 说 明 已 经 
成 功 搭建 了 服务 器 ， 所 有 和 AJAX 相关 的 代码 都 写 在 这 个 文件 中 。 


22.22 ”load() 方 法 


jQuery 中 的 一 个 基础 方法 一 一 load() 方 法 可 以 直接 加 载 任何 文件 内 容 ， 这 种 方法 在 一 般 的 开发 
中 很 少 使 用 ， 这 里 通过 load() 方 法 ， 熟 悉 一 下 使 用 jQuery 中 的 AJAX 的 流程 。 
【示例 】 

<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
</style> 
</head> 
<body> 

<div id="content"> 显 示 ajax 数据 内 容 </div> 

<button id="test"> 获 取 内 容 </button> 
<script> 

$("#test").click(function()í 

S$("#content").load('a.txt"); 
D 
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</script> 
</body> 
</html> 


上 面 的 代码 展示 的 是 一 个 最 基本 的 使 用 jQuery AJAX 的 例子 。 首 先 ， 在 public/ 目 录 下 创建 文 
件 atxt， 在 txt 文件 中 编写 内 容 “ 测 试 内 容 ”, 保存 。 每 当 单 击 “ 获 取 内 容 ” 按钮 时 ， 就 为 content 
元 素 调用 load() 方 法 。load() 方 法 需要 传 入 一 个 URL， 这 个 URL 就 是 要 获取 数据 内 容 的 路 径 。 这 里 
将 这 个 路 径 指定 为 之 前 定义 的 a.txt 文 件 。 这样， 每 当 单 击 按钮 时 ， jQuery 就 会 利用 load() 方 法 读 取 
atxt 文件 中 的 内 容 并 加 载 到 content 元 素 内 。 

打开 浏览 器 ， 查 看 效果 。 当 单 击 按钮 后 ，content 元 素 内 容 变 成 了 “测试 内 容 ”。 在 这 个 过 程 
中 ， 整 个 页 面 是 没有 进行 刷新 的 ， 这 就 是 AJAX 的 优势 所 在 。 

下 面 改 进 这 个 例子 ， 让 AJAX 可 以 从 服务 器 读 取 数 据 。 

在 index js 中 编写 如 下 代码 : 


Var express = require('express'); 
var router = express.Router(); 
Touter.get(/, function(req, res, next) í 
Tes.render('index', { title: 'Express' }); 
入 
router.get('/test', function(req, res, next)í 
res.send(" 测 试 内 容 "); 


D 
module.exports = router; 


我 们 为 indexjs 增加 了 一 个 路 由 , 这 个 路 由 的 名 字 叫 作 test. 每 次 当 浏览 器 端 发 送 AJAX 请 求 时 ， 
如 果 指 定 的 URL 是 test， 那 么 服务 器 端 就 会 使 用 这 段 代 码 进行 处 理 。test 路 由 器 中 定义 了 一 行 代码 ， 
使 用 res.send() 方 法 向 客户 端 返 回 了 一 条 数据 ， 这 条 数据 是 一 个 文本 数据 ， 内 容 为 “测试 内 容 ”。 
在 浏览 器 端 ， 也 需要 进行 代码 改写 ， 只 需要 将 load() 方 法 中 传 入 的 URL 参数 改 为 这 个 路 由 的 
名 字 test 即 可 : 
<script> 
$("#test").click(function()í 
$("#content").load('test'); 
D 
</script> 
打开 浏览 器 ， 单 击 按钮 ， 产 生 的 效果 和 第 一 个 例子 是 相同 的 ， 但 是 这 次 是 从 服务 器 读 取 的 数 
据 。 这 就 是 jQuery AJAX 的 一 般 工作 模式 。 
load() 方 法 还 可 以 传 入 第 二 个 参数 ， 用 来 向 服务 器 端 发 送 一 些 数据 ， 服 务 器 端 可 以 获取 这 些 数 
据 并 进行 处 理 。 
【HTML 代码 】 
<!DOCTYPE> 
<html> 
<head> 
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<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 

<style type="text/css"> 

</style> 

</head> 

<body> 

<div id="content"> 显 示 ajax 数据 内 容 </div> 
<button id="test"> 计 算 1+1</button> 
<script> 
$("#test").click(function()í 
$("#content").load('test', {a: 1, b: 11); 
D 

</script> 

</body> 

</html> 

【服务 器 端 代码 】 

Var express = require('express'); 

Var router = express.Router(); 

router.get('/, function(req, res, next) í 

Tes.render('index', { title: 'Express' }); 

1); 

router.get('/test', function(req, res, next)í 

console.log('aa'); 
var a = req.body.a; 
var b = req.body.b; 
var result = a + b; 
res.send("result"); 

D 

module.exports = router; 

在 这 个 例子 中 , 浏览 器 部 分 传 了 两 个 参数 a 和 b 到 服务 器 端 , 在 服务 器 端 对 参数 a 和 b 进行 了 
相 加 的 操作 ， 并 返回 给 浏览 器 。 浏 览 器 通过 AJAX 动态 将 计算 结果 展示 在 页 面 上 。 

这 个 例子 只 是 一 个 简单 的 例子 ， 正 常情 况 不 可 能 将 1+1 这 种 简单 的 逻辑 计算 问题 使 用 一 次 
AJAX 传 入 后 端 进行 计算 。 但 是 ， 涉 及 数据 库 或 必须 在 后 台 进 行 逻辑 操作 的 时 候 , 例如 比 对 传 入 的 
密码 和 数据 库 中 的 是 否 相 同 ， 就 需要 使 用 这 种 方法 了 。 

load() 方 法 的 第 三 个 参数 是 一 个 回调 函数 ， 这 个 回调 函数 在 load() 方 法 执行 完成 之 后 执行 。 


223 $.get() 方 法 和 $.post() 方 法 


22.3.1 $.get() 方 法 和 $.post() 方 法 的 原理 和 使 用 
在 浏览 器 和 服务 器 之 间 的 信息 交流 中 , 涉及 HTTP 的 传输 。 每 次 客户 端 向 浏览 器 传输 数据 时 ， 
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都 需要 建立 起 一 个 HTTP 连接 。 其 中 ， 有 多 种 不 同 的 数据 传输 方式 ， 最 常用 的 就 是 get 方法 和 post 
Hik. get 方法 和 post 方法 都 可 以 从 客户 端 向 服务 器 端 传输 数据 ， 但 是 二 者 的 应 用 场景 非常 不 同 。 

当 使 用 get 方法 时 ， 数 据 的 传输 是 通过 URL 进行 的 。 比 如 ， 在 一 个 登录 页 面 中 输入 用 户 名 和 
密码 , 如 果 HTTP 传输 方式 使 用 的 是 get 方法 , 那么 当 提 交 表 单 之 后 浏览 器 中 的 URL 是 这 样 的 ( 设 
原来 的 URL 是 www.testcom) : 


www.test.com?username=test&password=123456 


其 中 ，username 和 password 是 表单 中 的 <input> 标 签 定义 的 name 属性 ，name 属性 值 决定 了 数 
据 是 以 什么 样 的 键 值 传递 给 服务 器 的 。 当 URL 发 生变 化 后 ， 服 务 器 端 代码 会 根据 这 个 get 请 求 对 
应 的 URL， 读 取出 get 方法 传 入 的 username 和 password 属性 值 ， 并 进行 后 续 的 用 户 检测 、 登 录 等 
操作 。 

当 使 用 post 方法 传递 数据 时 , 情况 就 大 不 相同 了 。 post 方法 传递 数据 时 , 参数 不 会 显示 在 URL 
上 ， 而 是 通过 “内 部 ”传递 给 服务 器 端 ， 服 务 器 采用 另 一 种 方式 对 传递 过 来 的 数据 进行 读 取 ， 并 进 
行 接 下 来 的 操作 。 

HTTP 的 信息 是 通过 HTTP 的 报 文 进行 传播 的 。 其 中 ，HTTP 报 文 分 为 报 文 头 、 报 文体 。 报 文 
头 用 来 存储 HTTP 的 状态 、 信 息 等 ， 报 文体 存储 一 些 其 他 数据 。get 方法 传递 数据 时 ， 其 实 就 是 将 
数据 通过 报 文 头 进行 传递 。post 方法 传递 数据 时 ， 是 将 数据 放 在 报 文体 中 进行 传输 的 。 这 就 是 post 
方法 和 get 方法 传递 数据 的 本 质 区 别 。 

举 一 个 形象 的 例子 ， 如 果 将 一 次 HTTP 数据 的 传输 比喻 成 一 次 快递 ， 当 收 到 快递 时 ， 看 到 快 
递 的 盒子 表面 贴 着 快递 单 、 写 着 收 件 人 的 信息 等 ， 这 就 是 get 方法 传递 数据 ， 它 存在 于 表面 。 快 递 
邮寄 的 一 些 具体 内 容 封装 在 盒子 中 ， 对 外 界 是 封闭 的 ， 这 就 是 post 方法 。 

get 方法 和 post 方法 有 本 质 上 的 区 别 ， 所 以 二 者 在 使 用 上 的 差别 也 很 大 。 首 先 ， 由 于 get 方法 
是 将 信息 放 在 “盒子 表面 ”，URL 都 可 以 显示 通过 get 方法 传递 的 数据 ， 因 此 这 个 方法 的 安全 性 比 
较 低 。 如 果 要 传输 用 户 密码 等 非常 重要 、 隐 私 的 数据 ， 绝 对 不 能 使 用 get 方法 ， 因 为 其 他 人 可 以 立 
刻 从 URL 或 者 HTTP 报 文 头 中 看 到 。 相 对 而 言 ，post 将 数据 封装 在 报 文体 中 ， 因 此 安全 性 很 高 。 
其 次 ，get 方法 传递 的 数据 只 在 “盒子 表面 ”存在 ， 因 此 一 次 可 以 传递 的 数据 大 小 有 限 ， 适 合 少量 
数据 的 传递 。post 方法 传递 的 数据 是 “快递 盒子 中 的 内 容 ”， 因 此 可 以 传递 数量 比较 大 的 数据 。 

那么 什么 时 候 使 用 get 方法 、 什 么 时 候 使 用 post 方法 呢 ? 在 HTTP 对 方法 的 定义 中 ，get 方法 
主要 用 来 获取 数据 ，post 方法 用 来 向 服务 器 传输 数据 。 举 一 个 实际 的 例子 ， 在 一 个 电 商 网 站 中 ， 当 
需要 查询 用 户 名 为 Martin 的 用 户 购买 记录 时 ， 使 用 get 方法 ， 传 递 username 属性 值 ， 服 务 器 从 数 
据 库 读 取 数 据 并 返回 。 这 就 是 get 获取 数据 的 含义 。 当 需要 提交 一 次 购买 记录 时 ,需要 传递 用 户 名 、 
购买 日 期 、 商 品 编号 、 快 递 单 号 等 一 系列 的 信息 时 ， 这 些 信息 需要 上 传 到 服务 器 ， 服 务 器 将 数据 保 
存 到 数据 库 ， 这 时 就 需要 使 用 post 方法 。 

在 jQuery AJAX 中 ， 为 开发 者 封装 了 $.get() 方 法 和 $.post() 方 法 ， 这 两 个 方法 可 以 分 别 把 实现 
HTTP 中 通过 get 方法 和 post 方法 进行 的 数据 传输 。 

$.get() 方 法 可 以 传 入 两 个 参数 ， 第 一 个 参数 传 入 请 求 的 URL, 第 二 个 参数 是 一 个 回调 函数 ， 回 
调 函 数 当 get 方法 执行 完毕 后 执行 。 
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'Return Data' 字 符 串 。 在 回调 函数 中 ， 回 调 函数 的 参数 data 就 是 从 服务 器 传递 过 来 的 数据 ， 这 里 的 


回 





请 


【HTML 代码 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div id="content"> 显 示 ajax 数据 内 容 </div> 
<button id="test"> 发 送 get 请 求 </button> 
<script> 
$("#test").click(function()í 
$("#content").get('getTest', function(data) í 
$("content").html(data); 
D: 
DM 
</script> 
</body> 
</html> 


【服务 器 端 代码 】 


Var express = require('express'); 

var router = express.Router(); 

router.get('/, function(req, res, next) í 
res.render('index', { title: 'Express' 1); 

D: 

router.get('/getTest', function(req, res, next) { 
res.send('Return Data'); 


D 


module.exports = router; 


在 上 面 的 代码 中 ， 使 用 $.get() 方 法 向 服务 器 的 /getTest 路 由 发 送 了 一 个 请 求 ， 服 务 器 端 返回 











调 函数 将 返回 的 数据 显示 到 页 面 的 对 应 位 置 上 。 
$.post() 的 使 用 方法 类 似 。post 主要 用 来 传送 数据 。$.post() 方 法 传 入 三 个 参数 : 第 一 个 参数 是 





求 服务 器 的 URL， 第 二 个 参数 是 传 到 服务 器 中 的 数据 ， 第 三 个 参数 是 一 个 回调 函数 。 
【HTML 代码 】 
<!DOCTYPE> 


<html> 
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<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width. initial-scale=1, maximum-scale=1"/> 
<script src="http://code jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
</style> 
</head> 
<body> 

<div id="content"> 显 示 ajax 数据 内 容 </div> 

<button id="test"> 发 送 get 请 求 </button> 
<script> 

$("#test").click(function(){ 

$.post('postTest', {testData: 1}, function(data) { 
console.log(data); 
$("#content").html(data); 
D: 

D 
</script> 
</body> 
</html> 


【服务 器 端 代码 】 


var express = require('express'); 
Var router = express.Router(); 
router.get('/, function(req, res, next) í 
Tes.render('index', í title: 'Express' }); 
D): 
router.post('/postTest', function(req, res, next){ 
console.log(req.body.testData); 
res.send('Return Data'); 
D 
module.exports = router; 
首先 看 服务 器 端 代 码 ， 这 里 使 用 $.post 方法 发 送 数据 ， 发 送 到 的 服务 器 URL 为 postTest， 第 
二 个 参数 是 传递 的 数据 ， 这 里 使 用 了 JSON 的 数据 结构 。 
JSON 数据 结构 是 客户 端 发 送 数据 到 服务 器 端 、 服 务 器 端 返回 数据 到 客户 端 最 常用 的 数据 结 
构 。 下 面 是 一 个 JSON 数据 对 象 的 示例 : 
{ 
username: 'Martin', 
password: '123456', 


email: 'test.163.com' 


} 
JSON 对 象 是 一 种 数据 对 象 ， 用 大 括号 包围 起 来 ， 其 内 容 为 键 和 值 所 组 成 的 键 值 对 。 数 据 中 的 
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键 名 指定 每 条 数据 的 标识 ， 而 数据 的 值 表示 这 个 键 对 应 的 数据 内 容 。 在 上 面 的 例子 中 ， 前 端 通过 
$.post 传递 给 服务 器 端的 数据 就 是 一 个 JSON 对 象 。 在 服务 器 端 ， 通 过 req.body.testData 可 以 获取 
testData 这 个 键 对 应 的 具体 数据 的 值 。 关 于 服务 器 端的 数据 获取 ， 可 以 参考 node.js 相关 章节 。 

在 服务 器 端 ， 通 过 console.log0 打 印 出 客户 端 传递 过 来 的 数据 ， 以 测试 开发 者 的 数据 是 否 正确 
地 获取 到 。 注 意 ， 服 务 器 端 在 接收 get 方法 传递 过 来 的 数据 时 要 使 用 router.get 方法 ， 在 接受 post 
方法 传递 过 来 的 数据 时 要 使 用 router.post 方 法 。 

了 解 了 $.get() 方 法 和 $post() 方 法 ， 就 可 以 使 用 jQuery 中 的 AJAX 进行 前 后 端的 数据 交互 了 。 


22.3.2 ”实战 训练 
浏览 器 端 需要 用 户 输入 用 户 名 和 密码 ， 服 务 器 端 对 用 户 名 和 密码 进行 校 验 ， 校 验 通过 后 ， 返 








回 对 应 用 户 的 其 他 信息 ， 并 无 刷新 地 显示 在 浏览 器 界面 上 。 
【HTML 代码 】 
<!DOCTYPE> 
<html> 
<head> 


<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
</style> 
</head> 
<body> 
请 输入 用 户 名 : <input id="username" name="usemame" type="text" placeholder=" 请 输入 用 户 名 "/> 
请 输入 密码 :<input id="password" name="password" type="password" placeholder=" 请 输入 用 户 名 "/> 
<button id="submit"> 提 交 </button> 
查询 结果 : <div id="result"></div> 
<script> 
$("#submit").click(function()í 
var username = $('#username').val(); 
var password = $('#password').val(); 
$.post('search', {username: username, password: password}, function(data){ 
var tel = data.tel; 
var email = data.email; 


var age = data.age; 
var content = "电话 号 码 : "+ data.tel + "</br></br> 邮 箱 地 址 : "+ data.email + "</br></br> 
年 龄 "+ data.age; 
S$("#result").html(content) 
D: 
D 
</script> 
</body> 
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【服务 器 端 代码 】 


Var express = require('express'); 
var router = express.Router(); 
var info = [ 
{username: 'Martin', password: '123', tel: '1111111', email: 'martin@163.com', age: 11}, 
{username: 'Tom', password: '456', tel: '2222222', email: 'tom@163.com', age: 21}, 
{username: 'Mary', password: '789', tel: '3333333', email: 'mary@163.com', age: 18} 
] 
router.get('/, function(req, res, next) í 
Tes.render('index', { title: 'Express' }); 
D: 
Touter.post('/search', function(req, res, next) { 
var username = req.body.username; 
var password = req.body.password; 
for(var i = 0; i < info.length; i ++){ 
iusername = info[i].usemame && password == info[i].password) { 
res.send( {tel: info[i].tel, email: info[i].email, age: info[i].age}); 
} 


D 
module.exports = router; 
效果 图 如 图 22-2 所 示 。 
€ C © localhost:3000/ajax.html 


请 输入 用 户 名 : Martin 请 输入 密码 : … 
电话 号 码 : 1111111 


邮箱 地 址 : martin@163.com 
年 龄 11 





图 22-2 


由 于 还 没有 涉及 数据 库 知识 ， 因 此 在 服务 器 端 定义 了 一 些 固定 数据 。 这 里 固定 可 以 查询 三 个 
人 的 数据 ，info 是 一 个 数组 ， 数 组 中 的 每 一 个 元 素 都 是 JSON 对 象 。 

在 客户 端 ， 使 用 几 个 <input> 元 素来 接收 用 户 输入 的 用 户 名 和 密码 。 当 用 户 单 击 提交 按钮 时 ， 
会 触发 JavaScript 相关 代码 。JavaScript 代码 首先 会 获取 用 户 输入 的 内 容 ， 并 将 这 些 数据 组 合成 一 
个 JSON 数据 。 这 里 组 合成 的 JSON 如 下 : 

{ 

username: 'Martin', 


password: 123 
} 


然后 ， 通 过 jQuery 中 的 $.post() 方 法 将 JSON 数据 通过 AJAX 传送 到 服务 器 端 。 
在 服务 器 端 ， 首 先 根据 JSON 对 象 获取 到 username 和 password 键 分 别 对 应 的 值 ， 然 后 用 这 两 
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个 值 和 之 前 定义 的 info 数据 进行 对 比 ， 当 用 户 名 和 密码 都 正确 的 时 候 ， 表 示 可 以 进行 查询 ， 返 区 
对 应 的 电话 号 码 、 年 龄 等 相关 信息 。 同 样 ， 开 发 者 需要 将 这 些 相关 信息 组 合成 一 个 JSON 对 象 , 通 
过 res.send() 返 回 给 客户 端 。 这 就 是 AJAX 异步 传输 数据 的 过 程 。 

在 浏览 器 端 ， 回 调 函 数 用 来 处 理 返回 的 数据 。 这 里 将 数据 内 容 格式 化 后 展现 在 查询 结果 区 域 ， 
完成 本 次 的 整个 AJAX 传输 数据 过 程 。 

为 了 强调 get 方法 和 post 方法 各 自 使 用 的 场景 , 第 二 个 例子 为 应 用 增加 了 功能 。 用 户 根据 用 户 
名 进行 数据 的 查询 ， 还 可 以 添加 新 的 用 户 信息 。 


【HTML 代码 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<style type="text/css"> 
</style> 
</head> 
<body> 
请 输入 用 户 名 : <input id="find" name="find" type="text" placeholder=" 请 输入 用 户 名 "/> 
<button id="submit"> 提 交 </button> 
查询 结果 : <div id="result"></div> 
<p> 添 加 数据 </p> 
<form> 
用 户 名 : <input id="usemame" type="text" name="username"/> 
密码 : <input id="password" type="password" name="password"/> 
电话 : <inputid="tel" type="text" name="tel"/> 
年 龄 ，<input id="age" type="text" name="age"/> 
邮箱 : <input id="email" type="text" name="email" /> 
</form> 
<button id="add"> 添 加 数据 </button> 
<p id="back"></p> 
<script> 
$("#submit").click(function(){ 
var username = $('#find').val(); 
$.get('search?username= + username, function(data) { 
var tel = data.tel; 
var email = data.email; 

















var age = data.age; 
var content = "电话 号 码 : " + data.tel + "</br></br> 邮 箱 地 址 : " + data.email + "</br></br> 
年 龄 " + data.age; 
S$("#result").html(content) 
D; 
D 
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$("#add").click(function() í 
var username = $("#username").val(); 
var password = $("#password").val(); 
var tel = $("#tel").val(); 
var age = $("age").val(); 
var email = $("email").val(); 
var data = í 
username: username, 
password: password, 
tel: tel, 
age: age, 
email: email 
H 
$.post('add', data, function(data) í 
$("#back").html(data); 
J) 
D 
</script> 
</body> 
</html> 


【服务 器 端 代 码 】 


var express = require('express'); 
Var router = express.Router(); 
var info = [ 
{username: 'Martin', password: '123', tel: '1111111', email: 'martin@163.com', age: 11}, 
{username: 'Tom', password: '456', tel: '2222222', email: 'tom(@163.com', age: 21}, 
{username: 'Mary', password: '789', tel: '3333333', email: 'mary(@163.com', age: 18} 
] 
router.get('/, function(req, res, next) í 
res.render('index', { title: 'Express' }); 
)): 
router.get('/search', function(req, res, next) í 
Var username = req.query.username; 
for(var i = 0; i < info.length; i ++){ 
ifusername = info[i].usemame){ 
res.send( {tel: info[i].tel, email: info[i].email, age: info[i].age}); 


} 
» 
router.post('/add', function(req, res, next) { 
var username = req.body.username; 
var password = req.body.password; 
var tel = req.body.tel; 
var age = req.body.age; 


360 | HTML5+jQuery Mobile 移动 应 用 开发 





var email = req.body.email; 
info.push( í 
usemame: username, 
password: password, 
tel: tel, 
age: age, 
email: email 
D 
res.send(" 添 加 完成 "); 
D) 
module.exports = router; 


这 个 例子 比较 复杂 , 在 前 端 使 用 get 方 法 获取 信息 ,需要 传 入 的 是 username 参数 ,根据 username 
参数 进行 信息 的 获取 。 之 前 讲 过 ，get 方法 传递 数据 的 时 候 , 数据 都 放 在 URL 中 ,因此 这 里 的 URL 
为 带 参 数 的 URL， 例 如 : 

test.com?usrsername=Martin 

在 服务 器 端 ， 可 以 通过 req.query 来 获取 所 有 URL 传 递 过 来 的 参数 。 如 果 URL 对 应 的 是 这 样 的 : 

test.com?username=Martin&age=13 

那么 ， 在 后 台 服务 器 中 req. query 也 是 一 个 JSON 对 象 : 

{ 


username: "Martin' 
age: '13' 
i 
在 上 面 的 例子 中 ， 通 过 req.query.usemame 获取 到 客户 端 通过 get 方法 传递 的 username 值 ， 服 
务 器 端 利用 这 个 参数 在 info 中 进行 查询 ， 并 返回 数据 ， 剩 下 的 部 分 和 上 一 个 例子 相同 。 
接 下 来 ， 增 加 了 添加 用 户 的 功能 。 用 户 输入 要 添加 的 用 户 内 容 信息 之 后 ， 通 过 post 方法 传递 
到 后 端 服务 器 中 ， 后 台 服 务 器 将 JSON 数据 进行 整理 后 ,使 用 push 方法 添加 到 info 数组 中 ， 这 样 ， 
下 次 搜索 数据 的 时 候 就 能 够 搜索 出 来 了 。 这 样 就 利用 jQuery 中 的 AJAX 完成 了 一 个 不 带 数 据 库 的 
简易 用 户 信息 Demo. 





22.4 ajax() 方 法 





在 jQuery 中 ， 最 常用 的 AJAX 是 ajax() 方 法 ， 这 个 方法 整合 了 jQuery AJAX 所 有 相关 的 方法 ， 
只 需要 传 入 一 个 配置 项 ， 就 可 以 完成 各 种 各 样 的 AJAX 操作 。 此 外 ，jQuery 中 的 ajax() 方 法 还 提供 
了 一 些 其 他 的 方法 ， 可 以 很 方便 地 实现 很 多 功能 。 

使 用 ajax() 方 法 ， 主 要 是 向 其 中 传 入 一 个 配置 对 象 ， 这 个 配置 对 象 是 JSON 格式 的 数据 。 在 
jQuery API F, 定义 了 二 十 多 个 可 选择 的 配置 项 , 用 来 实现 丰富 的 AJAX 请 求 。 下 面 将 介绍 比较 常 
用 的 一 些 配置 项 ， 以 学 习 ajax() 的 使 用 方法 。 

一 个 基本 的 ajax() 方 法 格式 如 下 : 
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S$.ajax({ 
type: "POST", 
url: "test”, 
dataType: "json", 
data: yourData, 

Success: function(){}, 
error: function(){} 

D 

上 面 列举 的 配置 对 象 就 是 使 用 最 常用 的 ajax() 方 法 ， 下 面 逐 一 进行 介绍 。 

@ type 配置 项 用 来 定义 发 送 的 AJAX 请 求 是 什么 类 型 的 ， 默 认为 get 请 求 。 上 面 的 示例 中 定 
义 为 POST， 表 明 这 个 AJAX 请 求 为 post 请 求 。jQuery 中 ajax() 方 法 的 type 配置 项 只 能 指 
定 为 get 或 者 post。 其 他 的 方法 会 存在 浏览 器 兼容 性 问题 ， 建 议 不 要 使 用 。 
url 配置 项 定义 了 发 送 请 求 的 服务 器 端 URL， 这 里 发 送 到 服务 器 中 的 路 由 为 test. 
data 配置 项 定义 了 客户 端 向 服务 器 发 送 的 数据 ,可 以 使 用 JSON 数据 格式 或 者 其 他 数据 格式 。 
dataType 配置 项 定义 了 数据 类 型 。 注 意 ， 要 和 data 中 传递 的 数据 格式 相同 。 因 为 jQuery 
会 根据 dataType 传 入 的 值 决定 如 何 解析 data 中 的 数据 ， 如 果 传 入 的 dataType 和 data 配置 
项 不 搭配 ， 解 析 data 数据 时 就 会 出 错 。 

© success 配置 项 定义 的 是 一 个 回调 函数 ,这 个 回调 函数 将 在 AJAX 成 功 向 服务 器 发 送 请 求 并 
且 服 务 器 成 功 做 出 响应 之 后 执行 。 该 回调 函数 传 入 一 个 参数 ， 这 个 参数 包含 的 是 服务 器 端 
返回 的 数据 。success 配置 项 定义 的 回调 函数 主要 用 来 处 理 服务 器 端 返回 的 数据 ,比如 异步 
显示 返回 数据 等 。 

@ error 配 置 项 定义 的 也 是 回调 函数 ， 这 个 回调 函数 当 发 送 AJAX 请 求 时 发 生 错误 执行 。error 
回调 函数 传 入 两 个 参数 ， 第 一 个 参数 是 错误 信息 ， 第 二 个 参数 是 返回 的 数据 。error 回调 函 
数 可 以 用 来 捕捉 发 送 AJAX 请 求 时 的 错误 信息 。 

下 面 是 一 个 具体 的 例子 ， 用 ajax0 方 法 改写 之 前 的 demo。 

【HTML 代码 】 

<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 

<style type="text/css"> 

</style> 

</head> 

<body> 

请 输入 用 户 名 : <input id="find" name="find" type="text" placeholder=" 请 输入 用 户 名 "/> 
<button id="submit"> 提 交 </button> 

查询 结果 : <div id="result"></div> 

<p> 添 加 数据 </p> 
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<form> 
用 户 名 : <input id="usemame" type="text" name="username"/> 
密码 : <input id="password" type="password" name="password"/> 
电话 : <input id="tel" type="text" name="tel"/> 
年 龄 : <input id="age" type="text" name="age"/> 
邮箱 : <input id="email" type="text" name="email" /> 

</form> 

<button id="add"> 添 加 数据 </button> 

<p id="back"></p> 

<script> 

$("#submit").click(function(){ 

var username = $('#find').val(); 


S.ajax({ 
url: 'search?username= + usemame, 
type: 'GET', 


success: function(data) { 
var tel = data.tel; 
var email = data.email; 
var age = data.age; 


var content = "电话 号 码 : " + data.tel + "</br></br> 邮 箱 地 址 : 


"</br></br> 年 龄 "+ data.age; 
$("#result").html(content) 
h 
error: function(msg, data) { 
console.log(msg); 


J) 
» 
$("#add").click(function() í 
var username = $("#username").val(); 
var password = $("#password").val(); 
var tel = $("#tel").val(); 
var age = $("age").val(); 
var email = $("email").val(); 
var data = í 
username: username, 
password: password, 


tel: tel, 
age: age, 
email: email 
} 
S.ajax({ 
url: 'add', 


dataType: 'json', 
data: data, 


" + data.email + 
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type: 'POST', 

Success: function(data)í 
$("#back").html(data); 

h 

error: function(msg, data) í 
console.log(msg); 


j 
D 
» 
</script> 
</body> 
</html> 
【服务 器 端 代码 】 


var express = require('express'); 
var router = express.Router(); 
var info = [ 
{username: 'Martin', password: '123', tel: '1111111', email: 'martin@163.com', age: 11}, 
{username: 'Tom', password: '456', tel: '2222222', email: 'tom@163.com', age: 21}, 
{username: 'Mary', password: '789', tel: '3333333', email: 'mary(@163.com', age: 18} 
] 
router.get('/, function(req, res, next) í 
res.render('index', í title: 'Express' }); 
J); 
router.get('/search', function(req, res, next) í 
var username = req.query.username; 
for(var i = 0; i < info.length; i ++)í 
iusername = info[i].usemame){ 
res.send( {tel: info[i].tel, email: info[i].email, age: info[i].age}); 


|; 
D 
router.post('/add', function(req, res, next) { 
var username = req.body.username; 
var password = req.body.password; 
var tel = req.body.tel; 
var age = req.body.age; 
var email = req.body.email; 
info.push({ 
usemame: username, 
password: password, 
tel: tel, 
age: age, 
email: email 


» 
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res.send(" 添 加 完成 "); 
D 
module.exports = router; 


使 用 ajax0 方 法 ， 可 以 统一 使 用 get. post 或 者 其 他 的 jQuery 中 AJAX 方法 ， 十 分 方便 和 规范 。 
22.5 ”ajaxStart() 和 ajaxComplete() 方 法 


当 AJAX 请 求 正在 发 送 ， 服 务 器 端正 在 处 理 时 ， 有 的 时 候 当 数据 量 很 大 时 ， 这 个 AJAX 发 送 过 
程 可 能 会 很 长 。 好 的 用 户 体 验 是 当 AJAX 请 求 没有 处 理 完成 时 ， 就 给 用 户 一 个 提示 信息 ， 显 示 数 据 
正在 处 理 。ajaxStart() 和 ajaxComplete() 方 法 就 可 以 实现 这 个 功能 ，ajaxStart() 方 法 可 以 在 AJAX 请 求 
开始 发 送 的 时 候 触发 ， 而 ajaxComplete() 方 法 会 当 AJAX 请 求 执行 结束 之 后 执行 。 

修改 上 节 例 子 的 代码 ， 添 加 用 户 提示 功能 。 

【HTML 代码 】 

<!DOCTYPE> 

<html> 

<head> 

<meta charSet="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> 

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 

<style type="text/css"> 

</style> 

</head> 

<body> 

请 输入 用 户 名 : <input id="find" name="find" type="text" placeholder=" 请 输入 用 户 名 "> 
<button id="submit"> 提 交 </button> 
查询 结果 : <div id="result"></div> 
<p> 添 加 数据 </p> 
<form> 
用 户 名 : <input id="usemame" type="text" name="username"/> 
密码 : <input id="password" type="password" name="password"/> 
电话 : <input id="tel" type="text" name="tel"/> 
年 龄 : <input id="age" type="text" name="age"/> 
邮箱 : <input id="email" type="text" name="email" /> 
</form> 
<button id="add"> 添 加 数据 </button> 
<p id="back"></p> 
<p id="status"></p> 
<script> 
$("#submit").click(function()í 
var username = $('#find').val(); 
S.ajax( í 
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url: 'search?username=' + usemame, 
type: 'GET', 
Success: function(data) { 

var tel = data.tel; 

var email = data.email; 

var age = data.age; 


var content = "电话 号 码 : " + data.tel + "</br></br> 邮 箱 地 址 : "+ data.email +" 


</br></br> 年 龄 " + data.age; 


D 


» 


$("#result").html(content) 
} 
error: function(msg, data) í 
console.log(msg); 


$("#add").click(function() í 
var username = $("#username").val(); 
var password = $("#password").val(); 
var tel = $("#tel").val(); 
var age = $("age").val(); 
var email = $("email").val(); 
var data = í 


i 


username: username, 
password: password, 
tel: tel, 

age: age, 

email: email 


$.ajax( í 


D 


D 


url: 'add', 

dataType: 'json', 

data: data, 

type: 'POST', 

success: function(data) { 
$("#back").html(data); 

上 

error: function(msg, data){ 
console.log(msg); 


$(document).ajaxStart(function(){ 
S$("#status").html(" 正 在 加 载 ， 请 稍 后 "); 


» 


$(document).ajax Complete(function()í 
S("i#status").html(""); 
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D 
</script> 
</body> 
</html> 


【服务 器 端 代码 】 


var express = require('express'); 
var router = express.Router(); 
var info = [ 
{username: 'Martin', password: '123', tel: '1111111', email: 'martin@163.com', age: 11}, 
{username: 'Tom', password: '456', tel: '2222222', email: 'tom@163.com', age: 21}, 
{username: 'Mary', password: '789', tel: '3333333', email: 'mary@163.com', age: 18} 
] 
router.get('/, function(req, res, next) í 
Tes.render('index', { title: 'Express' }); 
J); 
router.get('/search', function(req, res, next) í 
var username = req.query.username; 
for(var i = 0; i < info.length; i ++){ 
ifusername == info[i].usemame)í 
res.send( {tel: info[i].tel, email: info[i].email, age: info[i].age}); 


} 
» 
router.post('/add', function(req, res, next) { 
var username = req.body.username; 
var password = req.body.password; 
var tel = req.body.tel; 
var age = req.body.age; 
var email = req.body.email; 
info.push({ 
usemame: username, 
password: password, 


tel: tel, 
age: age, 
email: email 
D 
res.send(" 添 加 完成 "); 


)) 

module.exports = router; 

在 上 面 的 代码 中 , 为 页 面 添加 了 一 个 部 分 , 这 个 部 分 用 来 显示 等 待 提示 信息 。 之 后 为 document 
元 素 绑 定 了 ajaxStart() 和 ajaxComplete0 事 件 ， 当 整个 文档 发 生 AJAX 事件 时 , 就 会 显示 或 者 隐藏 提 
示 信 息 。 


jQuery Mobile 组 件 


本 章 内 容 要 点 : 

k 定义 一 个 移动 应 用 界面 一 一 page 组 件 

x 添加 功能 按钮 一 一 button 组 件 

3 定义 可 滑动 的 面板 一 一 panel 

jQuery Mobile 中 提供 了 丰富 的 组 件 ， 灵 活 使 用 这 些 组 件 ， 可 以 快速 定义 出 开发 移动 Web 应 用 
需要 的 各 个 界面 部 分 和 对 应 功能 ， 本 章 主要 介绍 这 些 组 件 的 功能 和 使 用 。 


23.1 定义 一 个 移动 应 用 界面 一 一 page 组 件 


23.1.1 指定 一 个 页 面 

开发 移动 应 用 最 基础 的 就 是 定义 一 个 个 的 移动 界面 ， 然 后 在 界面 上 添加 各 种 各 样 的 功能 。 
jQuery Mobile 中 的 page 组 件 就 是 用 来 生成 一 个 个 界面 的 。 在 jQuery Mobile 中 ， 通 过 为 某 一 个 div 
元 素 指 定 data-role 属性 为 page， 就 可 以 将 其 定义 为 一 个 页 面 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 


<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
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<script src = "http://code.jquery.com/jquery-1.8.0.min.js"> </script> 

<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 

</style> 

</head> 

<body> 

<div data-role = "page"> 一 个 页 面 </div> 

<script> 

</script> 

</body> 

</html> 


打开 浏览 器 ， 使 用 Chrome 控制 器 打开 移动 调试 功能 查看 
效果 ， 如 图 23-1 所 示 。 

再 查看 一 下 对 应 元 素 的 代码 ,可 以 发 现 ,被 指定 了 data-role 
属性 的 div 元 素 样式 也 发 生 了 变化 。 在 对 应 元 素 的 样式 审查 中 ， 
可 以 看 到 jQuery Mobile 为 开发 者 添加 了 新 的 样式 ， 并 自动 添 
加 了 媒体 查询 等 响应 式 功能 。 其 实 , jQuery Mobile 会 根据 元 素 
设置 的 属性 自动 为 其 添加 一 些 样式 和 功能 。 在 jQuery Mobile 
中 ,data-role 属性 可 以 指定 一 个 元 素 在 一 个 页 面 中 属于 什么 “ 角 
色 ”。jQuery Mobile 会 获取 这 个 属性 值 并 解析 ， 然 后 根据 
data-role 属性 来 为 元 素 添加 样式 或 功能 。 

需要 注意 的 是 ，jQuery Mobile 并 没有 扩展 HTML， 仅 仅 是 为 元 素 自 定 义 了 一 些 属性 ， 然 后 通 
过 JavaScript 代码 获取 属性 值 ， 进 行 对 应 的 功能 设置 。 


23.1.2 为 页 面 划分 不 同 的 区 域 


在 一 个 页 面 中 ,可 能 分 为 头 部 、 页 面 主题 以 及 页 面 下 方 菜单 栏 三 个 部 分 。 在 一 个 page 元 素 中 ， 
开发 者 可 以 继续 使 用 data-role 属性 ， 为 一 个 page 定义 出 不 同 的 部 分 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 


<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 


一 个 页 面 


图 23-1 





<script src = "http://code.jquery.com/jquery-1.8.0.min.js"> </script> 

<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"> </script> 

<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 

</style> 

</head> 

<body> 
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<div data-role = "page"> 
<div data-role = "header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 
<p> 主 体 部 分 </p> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 <h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


上 面 的 代码 就 将 一 个 页 面 划分 成 了 头 、 身 、 尾 三 个 部 分 ， 
效果 如 图 23-2 所 示 。 

没有 使 用 任何 一 行 CSS 代码 或 者 JavaScript 代码 就 实现 了 
这 样 一 个 移动 端 经 常 出 现 的 布局 ， 这 就 是 jQuery Mobile 的 方便 
之 处 。 通 过 对 data-role 属性 设 定 不 同 的 属性 值 ，jQuery Mobile 
就 可 以 自动 对 这 些 不 同 的 组 件 进行 样式 和 功能 设 定 。 

data-role 设 定 为 head， 就 声明 了 这 个 div 代表 头 部 组 件 ; 
data-role 设 定 为 main， 代 表 这 个 div 是 主体 部 分 组 件 ，data-role 
设 定 为 footer， 代 表 这 个 div 是 页 脚 组件 。 图 23-2 








23.2 ”添加 功能 按钮 一 一 button 组 件 


有 了 界面 ， 接 下 来 就 需要 在 界面 中 添加 一 些 按钮 了 。 
23.2.1 按钮 组 件 的 定义 方式 
在 jQuery Mobile 中 ， 下 面 三 种 方式 都 可 以 生成 样式 相同 的 按钮 。 
A) 使 用 <button> 标 签 声明 按钮 ， 例 如 : 
<button>button 按钮 </button> 


jQuery Mobile 会 自动 将 button 标签 的 按钮 进行 jQuery Mobile 处 理 。 
(2) 使 用 <input> 标 签 声明 按钮 ， 指 定 input 标签 的 type 属性 为 button， 例 如 : 


<input type = "button" value = "input 按钮 > 
jQuery Mobile 会 识别 这 些 type 属性 值 为 button 的 input 标签 ， 并 为 它们 设 定 按钮 的 样式 。 
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(3) 使 用 <a> 标 签 声明 按钮 ， 要 指定 data-role 属性 值 为 button， 例 如 : 
<a data-role = "button">a 按钮 </a> 

下 面 展 示 三 种 按钮 的 定义 方法 。 

【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content =" 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"> </script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"> </script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "header"> 
<h1> 页 面 头 部 </h1> 
</div> 
<div data-role = "main"> 
<button>button 按钮 </button> 
<input type = "button" value = "input 按钮 "人 > 
<a data-role = "button">a 按钮 </a> 
</div> 
<div data-role = "footer"> 


<h1> 底 部 菜单 栏 </h1> 


width = device-width, initial-scale = 1, maximum-scale = 1"/> 








</div> 

</div> 

<script> 

</script> 

</body> 

</html> 

效果 如 图 23-3 所 示 。 页 面 头 部 

因为 有 的 a 标签 可 能 只 是 用 来 当 正常 的 超 链接 ， 所 以 要 === 
想 让 jQuery Mobile 将 某 一 个 a 标签 当 作 按 钮 处 理 , 就 必须 设 
定 data-role 属性 为 button。 bss 

在 开发 过 程 中 ， 如 果 需 要 进行 页 面 间 的 跳 转 ， 一 般 都 会 Sa 
使 用 a 标签 这 种 声明 按钮 的 方法 。 因 为 a 标签 自 带 的 href 属 底部 菜单 栏 
性 可 以 方便 地 进行 URL 跳 转 。 





图 23-3 
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23.2.2 ”按钮 组 件 样式 设 定 


对 于 这 些 按钮 样式 的 设 定 ， 可 以 使 用 CSS 直接 设 定 。 当 然 ，jQuery Mobile 中 也 提供 了 很 多 定 
义 好 的 样式 ， 为 设 定 按钮 样式 节省 了 很 多 时 间 。 
1. 设 定 按钮 的 排列 方式 


上 面 直接 定义 的 按钮 都 是 每 个 按钮 单独 占用 一 行 ， 这 是 默认 的 块 级 按钮 显示 方式 。 如 果 想 让 
按钮 修改 为 行内 显示 〈 在 一 行内 显示 ) ， 就 可 以 为 按钮 添加 ui-btn-inline 类 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"> </script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"> </script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 
<a data-role = "button" class = "ui-btn ui-btn-inline"> 按 钮 1</a> 
<a data-role = "button" class = "ui-btn ui-btn-inline"> 按 钮 2</a> 
<a data-role = "button" class = "ui-btn ui-btn-inline"> 按 钮 3</a> 
<a data-role = "button"> 按 钮 4</a> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 <h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 ， 前 三 个 按钮 添加 了 ui-btn-inline 类 ， 这 三 个 按钮 会 自 适应 地 显示 在 一 行 中 。 
第 四 个 按钮 没有 设 定 ut-btn-inline 类 ， 因 此 这 个 按钮 还 是 块 级 的 。jQuery Mobile 其 实 是 通过 改变 按 
钮 的 display 属性 值 来 控制 按钮 是 行内 显示 还 是 块 级 显示 的 。 





372 | HTML5+jQuery Mobile 移动 应 用 开发 





在 上 面 的 例子 中 ， 除 了 为 元 素 添加 ui-btn-inline 类 以 外 ， 还 为 元 素 添加 了 一 个 ui-btn 类 ， 这 个 
ui-btn 类 的 作用 是 什么 呢 ? 

ui-btn 类 的 作用 是 声明 这 个 元 素 要 被 按照 jQuery Mobile 中 ui-btn 类 型 的 样式 来 处 理 ， 也 就 是 
说 , 只 有 设 定 了 ui-btn, 一 个 元 素 的 ui-btn 系列 的 样式 设 定 才能 被 激活 , 才能 开始 使 用 qita 和 ui-btn 
相关 的 样式 。 在 上 面 的 例子 中 ， 使 用 了 ui-btn-inline， 这 是 按钮 组 件 的 样式 类 ， 要 想 它 起 作用 ， 就 
必须 先 声明 元 素 的 类 为 ui-btn。 这 是 jQuery Mobile 中 关于 样式 设 定 比 较 特 殊 的 一 种 模式 。 

2. 其 他 常用 ui-btn 样式 类 

除了 排列 方式 的 类 之 外 ，jQuery Mobile 中 还 提供 了 一 些 其 他 的 ui-btn 样式 类 : 
为 按钮 添加 圆 角 。 
e ui-mini 指定 按钮 为 小 尺寸 按钮 。 
@ ui-shadow — 为 按钮 添加 阴影 效果 。 


为 了 寻求 方便 ， 可 以 直接 使 用 这 样 的 样式 类 ， 同 时 直接 使 用 自己 编写 的 CSS 代码 对 按钮 的 样 
式 进行 设 定 也 是 一 个 很 好 的 选择 。 


3. 为 按钮 添加 小 图 标 


为 了 让 按钮 的 表现 力 更 好 ， 有 时 需要 为 按钮 添加 一 些小 图 标 ， jQuery Mobible 内 置 了 一 套 精心 
绘制 的 图 标 ， 可 以 直接 使 用 。 

jQuery Mobile 中 的 小 图 标 可 以 使 用 类 的 方式 进行 调用 ， 每 一 个 小 图 标 ， 对 应 着 不 同 的 类 名 ， 这 
些小 图 标的 类 名 都 是 以 ui-icon- 作 为 前 缀 的 。 下 面 使 用 icon 系统 为 搜索 按钮 添加 搜索 图 标 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"> </script> 
<script src = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.js"> </script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "header"> 
<hl1> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 
<a data-role = "button" class = "ui-btn ui-icon-search ui-btn-icon-left"> 搜 索 </a> 
</div> 


® ui-corner-all 
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<div data-role = "footer"> 
<hl> 底 部 菜单 栏 <hl> 

</div> 

</div> 

<script> 

</script> 

</body> 

</html> 


效果 如 图 23-4 所 示 。 

这 里 除了 设置 ui-icon-search 指定 按钮 的 小 图 标 外 ， 还 设 定 了 ui-btn-icon-left， 这 个 类 表明 的 是 
要 将 图 标 设 定 在 按钮 中 的 哪个 方位 ， 其 他 可 选 值 还 包括 ui-btn-icon-top、ui-btn-icon-buttom 、 
ui-btn-icon-right。 不 设 定 这 个 类 只 设 定 元 素 的 ui-icon- 属 性 的 话 ， 小 图 标 是 不 起 作用 的 ， 图 23-5 Jë 
示 了 不 同 ui-btn-icon- 属 性 值 所 产生 的 效果 。 








23-4 图 23-5 
此 外 ， 如 果 想 只 显示 图 标 ， 而 不 显示 按钮 内 的 文字 ， 可 以 为 元 素 添加 ui-btn-icon-notext 类 名 。 
23.2.3 ”按钮 组 


当 需 要 将 一 些 功能 相近 或 相关 的 按钮 组 合成 一 个 按钮 组 放 在 一 起 时 ， 就 需要 使 用 jQuery 
Mobile 中 的 按钮 组 了 。 按 钮 组 需要 定义 一 个 div 来 包含 这 些 想 要 组 合 到 一 起 的 按钮 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"> </script> 

<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script> 

<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 

</style> 

</head> 

<body> 
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<div data-role = "page"> 
<div data-role = "header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 
<div data-role = "controlgroup" data-type = "horizontal"> 
<p> 水 平 组 合 按钮 :</p> 
<a href = "#" class = "ui-btn"> 按 钮 1</a> 
<a href = "#" class btn"> 按 钮 2</a> 
<a href = "#" class = "ui-btn"> 按 钮 3</a> 
</div> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 <h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


其 中 ，data-type 属性 指定 了 这 个 按钮 组 中 的 按钮 是 水 平 排 布 的 还 是 垂直 排 布 的 。 











233 菜单 栏 


移动 端的 菜单 栏 是 非常 常用 的 ， 而 且 移动 应 用 的 菜单 栏 与 普通 的 PC 端 应 用 菜单 栏 有 很 大 不 
同 。 在 jQuery Mobile P, 一 整 块 菜单 栏 可 以 用 一 个 div 来 实现 ,并 把 这 个 div 的 data-role 属性 设 定 
成 navbar。 这 样 ， 这 个 div 就 会 被 jQuery Mobile 认为 是 菜单 栏 ， 而 里 面 的 所 有 a 标签 都 会 被 视 为 
按钮 ， 即 便 不 为 其 指定 data-role 属性 为 button, 

在 菜单 栏 中 ， 使 用 的 基本 HTML 结构 是 ul 和 1i， 每 个 列表 存放 一 个 按钮 ， 这 样 jQuery Mobile 
就 会 为 这 些 按钮 的 排 布 指定 适用 于 移动 端 应 用 菜单 栏 的 样式 。 下 面 是 一 个 基本 例子 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 

<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"> </script> 

<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script> 

<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
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</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "header"> 
<hl> 页 面 头 部 <h1> 
</div> 
<div data-role = "main"> 
<div data-role = "navbar"> 
<ul> 
<li> <a href = "#"> Fù 1</a> </li> 
<li> <a href="#> 导 航 2</a> </li> 
<li> <a href = " 护 > 导航 3</a> </li> 
</ul> 
</div> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


效果 如 图 23-6 所 示 。 

通过 这 样 的 设 定 ， 每 个 a 标签 都 被 视 为 了 按钮 ， 并 
且 单 击 按钮 的 样式 、 默 认 的 样式 都 已 经 被 设 定好 了 。 从 
整个 导航 区 域 的 排 布 样式 来 看 ， 占 满 了 屏幕 ， 无 论 开发 
者 在 Chrome 中 变换 成 什么 样 的 机 型 ， 样 式 都 不 会 乱 。 

一 般 的 导航 按钮 中 都 会 有 对 应 的 图 片 ，navbar 也 可 图 23-6 
以 添加 类 似 于 button 按钮 的 小 图 标 。 通 过 为 a 标签 添加 data-icon 属性 ， 就 可 以 指定 小 图 标 了 。 同 
时 ， 可 以 配合 data-iconpos 属性 来 设置 图 标的 位 置 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 

<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"> </script> 

<script src = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.js"> </script> 

<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
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</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 
<div data-role = "navbar"> 
<ul> 
<li> <a href = "#" data-icon = "home" data-iconpos = "top"> 导 航 1</a> </li> 
<li> <a href = "#" data-icon = "home" data-iconpos = "top"> 导 航 2</a> </li> 
<li> <a href = "#" data-icon = "home" data-iconpos = "top"> 导 航 3</a> </li> 
</ul> 
</div> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


效果 如 图 23-7 所 示 。 





图 23-7 


23.4 ”定义 可 滑动 的 面板 一 一 panel 组 件 


在 移动 应 用 中 ， 基 本 都 存在 一 种 可 滑动 的 面板 。 这 部 分 内 容 最 开始 处 于 隐藏 状态 ， 在 单 击 某 
个 按钮 时 自动 滑 出 来 ， 展 现 一 些 功能 或 内 容 。 这 种 滑动 面板 在 移动 端 应 用 很 常见 , 在 jQuery Mobile 
中 也 有 对 应 的 组 件 。 

panel 组 件 可 以 定义 可 滑动 的 面板 ， 定 义 方式 和 其 他 jQuery Mobile 组 件 类 似 ， 只 要 将 一 个 div 
元 素 指定 data-role 属性 值 为 panel 即 可 。 
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如 何 触发 这 个 面板 的 打开 和 关闭 呢 ? 每 次 定义 一 个 面板 的 时 候 ， 开 发 者 都 需要 为 这 个 面板 所 


在 的 div 定义 一 个 id 属性 值 。 然 后 通过 某 个 a 标签 的 href 





属性 值 指 向 这 个 id 值 ， 就 可 以 触发 面板 


的 开启 了 。 在 面板 开启 状态 ， 单 击 其 他 位 置 ， 就 可 以 实现 面板 关闭 了 。 
panel 组 件 要 放置 在 page 组 件 中 ， 但 是 要 放 在 head 组 件 之 前 或 者 foot 组 件 之 后 ， 不 能 插入 放 
到 由 head, main, foot 组 成 的 页 面 主体 之 中 。 可 以 将 panel 组 件 定义 在 page 组 件 之 前 或 者 之 后 。 


下 面 是 一 个 面板 组 件 定义 的 例子 。 
【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 


<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 


<script src = "http://code.jquery.com/jquery-1.8.0.min.js"> </script> 
<script src = "http://code.jquery.com/mobile/ 1.4.5/jquery.mobile-1.4.5.min.js"> </script> 


<link rel = "stylesheet" href = "http://code.jquery.com/mobile/ 1 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "panel" id = "panelTest"> 


.4.5/jquery.mobile-1.4.5.min.css"> 


可 滑动 的 面板 
</div> 
<div data-role = "header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 
<p> 主 体 部 分 </p> 
<a href = "#panelTest" class = "ui-btn ui-btn-inline"> 打 开 面 板 </a> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


默认 情况 下 ， 可 滑动 的 面板 在 整个 页 面 的 左边 出 现 ， 可 以 通过 data-position 属性 值 来 修改 滑动 
面板 的 位 置 。 下 面 的 例子 将 data-position 的 属性 值 设 置 为 right， 让 面板 在 右 侧 出 现 。 
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【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"> </script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "panel" id = "panelTest" data-position = "right"> 
可 滑动 的 面板 
</div> 
<div data-role = "header"> 
<h1> 页 面 头 部 </h1> 
</div> 
<div data-role = "main"> 
<p> 主 体 部 分 </p> 
<a href = "#panelTest" class = "ui-btn ui-btn-inline"> 打 开 面 板 </a> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


除了 可 以 设置 滑动 面板 的 位 置 ， 还 可 以 设置 滑动 面板 出 现 动画 的 方式 ，data-display 属性 值 可 
以 进行 出 现 动 画 方式 的 设置 。 下 面 将 data-display 属性 值 设置 为 overlay， 让 面板 的 出 现 变 成 覆盖 内 
容 的 动画 效果 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 


<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 





<script src = "http://code.jquery.com/jquery-1.8.0.min.js"> </script> 
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<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "panel" id = "panelTest" data-position = "right" data-display = "overlay"> 
可 滑动 的 面板 
</div> 
<div data-role = "header"> 
<hl> 页 面 头 部 </h1> 
</div> 
<div data-role = "main"> 
<p> 主 体 部 分 </p> 
<a href = "#panelTest" class = "ui-btn ui-btn-inline"> 打 开 面 板 </a> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 <hl1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


23.5 弹 框 组 件 


在 移动 端 应 用 中 另 一 个 比较 常见 的 组 件 是 弹 窗 ， 在 jQuery Mobile 中 弹 窗 也 有 对 应 的 组 件 。 
23.5.1 定义 基本 弹 框 


创建 弹 窗 ， 只 要 将 一 个 div 元 素 指定 data-role 属性 值 为 popup 就 可 以 了 。 

要 想 调用 这 个 弹 窗 ， 需 要 定义 一 个 对 应 的 a 标签 。 和 滑动 面板 的 调用 方式 类 似 ， 为 这 个 弹 窗 
组 件 所 在 的 div 设 定 id 属性 值 ， 并 为 a 标签 设 定 href 属性 ， 指 向 这 个 id。 此 外 ， 为 a 标签 添加 一 
个 data-rel 属性 ， 将 属性 值 设置 为 “popup”， 表 示 调 用 弹 框 组 件 。 

下 面 的 例子 定义 一 个 最 基本 的 弹 框 组 件 。 

【示例 】 

<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 
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<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"> </script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"> </script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "header"> 
<hl> 页 面 头 部 </h1> 
</div> 
<div data-role = "main"> 
<div data-role = "popup" id = "popupTest"> 
<p> 弹 窗 组 件 </p> 
</div> 
<p> 主 体 部 分 </p> 
<a href = "#popupTest" data-rel = "popup" class = "ui-btn ui-btn-inline"> 打 开 弹 窗 </a> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


可 以 直接 使 用 CSS 对 定义 这 个 弹 窗 的 div 元 素 添加 样式 ， 以 达到 更 好 的 效果 。 

弹 窗 默 认 会 显示 在 调用 它 弹出 的 元 素 的 位 置 ， 也 可 以 通过 data-position-to 来 指定 弹 框 出 现 的 位 
置 。 如 果 将 data-position-to 属性 值 设置 为 window， 弹 框 就 会 在 屏幕 的 正中 间 显 示 。 还 可 以 将 
dataposition-to 属性 值 设置 为 某 个 元 素 的 id 值 ， 这 样 弹 窗 就 会 在 对 应 id 值 的 元 素 位 置 显示 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 

<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"> </script> 

<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"> </script> 

<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 

</style> 

</head> 
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<body> 
<div data-role = "page"> 
<div data-role = "header"> 
<hl> 页 面 头 部 <hl1> 
</div> 
<div data-role = "main"> 
<div data-role = "popup" id = "popupTest" data-position-to = "window"> 
<p> 弹 窗 组 件 </p> 
</div> 
<p> 主 体 部 分 </p> 
<a href = "#popupTest" data-rel = "popup" class = "ui-btn ui-btn-inline"> 打 开 弹 窗 </a> 
</div> 
<div data-role = "footer"> 
<h1> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


上 面 的 代码 让 弹 窗 在 屏幕 的 正中 间 显 示 ， 效 果 如 图 23-8 


所 示 。 
23.5.2 ”装饰 弹 窗 
1. 添加 关闭 按钮 底部 菜单 栏 


默认 情况 下 ,打开 的 弹 窗 可 以 通过 单 击 其 他 任何 非 弹 窗 的 
位 置 关闭 。 jQuery Mobile 也 为 开发 者 提供 了 内 置 的 弹 窗 关闭 按 
钮 ， 这 种 按钮 实际 用 处 不 大 ， 更 多 的 是 用 来 装饰 。 

通过 为 弹 窗 定义 一 个 按钮 ， 并 且 指定 一 些 类 ， 就 可 以 为 弹 
窗 添加 关闭 按钮 了 。 下 面 的 例子 为 弹 框 右上 角 添 加 了 一 个 关闭 











【示例 】 图 23-8 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 

<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"> </script> 

<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script> 

<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
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</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "header"> 
<hl> 页 面 头 部 <hl1> 
</div> 
<div data-role = "main"> 
<div data-role = "popup" id = "popupTest" data-position-to = "window"> 
<a href = "#" data-rel = "back" class = "ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete 
ui-btn-icon-notext ui-btn-right"> 关 闭 </a> 


<p> 弹 窗 组 件 </p> 
</div> 
<p> 主 体 部 分 </p> 
<a href = "#popupTest" data-rel = "popup" class = "ui-btn ui-btn-inline"> 打 开 弹 窗 </a> 
</div> 
<div data-role = "footer"> 
<h1l> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 
效果 如 图 23-9 所 示 。 





图 23-9 


2. 为 弹 框 添加 对 话 边框 


可 以 将 弹 框 制 作成 对 话 框 类 型 .通过 指定 data-arrow 属性 来 为 弹 框 添加 小 尖 角 , 可 以 在 "I"( 左 
边 ) + "t" CERO s "r" CE) 或 者 "b" (底部 ) 4 个 位 置 添加 尖 角 。 下 面 是 一 个 例子 。 
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【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"> </script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"> </script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role="main"> 
<div data-role="popup" id="popupTest" data-arrow="l"> 
<p> 弹 窗 组 件 </p> 
</div> 
<p> 主 体 部 分 </p> 
<a href="#popupTest" data-rel="popup" class="ui-btn ui-btn-inline"> 打 开 弹 窗 </a> 
</div> 
<div data-role="footer"> 
<hl> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


3. R) = 
有 的 时 候 ， 需 要 在 弹出 弹 窗 后 为 整个 界面 添加 一 个 遮 单 层 ， 以 此 来 凸显 弹 框 ， 这 个 在 jQuery 


Mobile 中 也 有 实现 方法 。 


在 被 设置 为 弹 框 的 div 元 素 中 设置 data-overlay-theme 属性 ， 就 可 以 实现 遮 单 层 的 设置 了 。 


data-overlay-theme 属性 有 两 个 属性 值 , 分 别 是 a 和 b. 如 果 将 data-overlay-theme 的 属性 值 设置 为 a， 
就 会 生成 一 个 颜色 比较 浅 的 遮 罩 层 。 如 果 将 data-overpay-theme 的 属性 值 设 置 为 b， 就 会 生成 一 个 
颜色 比较 深 的 遮 单 层 。 


【示例 】 


<!DOCTYPE> 
<html> 
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<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"> </script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"> </script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role="main"> 
<div data-role="popup" id="popupTest" data-overlay-theme="b" data-position-to="window"> 
<p> 弹 窗 组 件 </p> 
</div> 
<p> 主 体 部 分 </p> 
<a href="#popupTest" data-rel="popup" class="ui-btn ui-btn-inline"> 打 开 弹 窗 </a> 
</div> 
<div data-role="footer"> 
<h1> 底 部 菜单 栏 </hl> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


效果 如 图 23-10 所 示 。 





23-10 
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23.6 在 移动 应 用 中 添加 响应 式 表 格 


在 jQuery Mobile 中 ， 赋 予 了 表格 可 以 自动 适应 屏幕 大 小 的 响应 式 功能 。 只 要 为 表格 添加 一 个 
jQuery Mobile 自 定义 的 类 名 ， 就 可 以 实现 表格 的 自 适 应 ， 使 表格 可 以 根据 屏幕 的 大 小 自动 改变 展 
现形 式 。 要 想 让 一 个 表格 成 为 jQuery Mobile 中 的 表格 ， 只 要 为 一 个 table 标签 指定 data-role 属性 值 
J table 即 可 。 

jQuery Mobile 中 的 响应 式 表格 有 两 种 : 一 种 为 回流 表格 ， 另 一 种 为 列 切换 表格 。 


23.6.1 回流 表格 


回流 表格 有 这 样 的 特征 ， 当 屏幕 能 够 显示 表格 中 的 所 有 列 时 ， 表 格 正常 显示 ; 当 屏 幕 小 到 不 
攻 完 全 容纳 所 有 列 时 ， 表 格 的 展现 形式 会 变 成 垂直 展示 。 下 面 给 出 一 个 回流 表格 的 例子 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"> </script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"> </script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<hl1> 页 面 头 部 <hl> 
</div> 
<div data-role="main"> 
<table data-role="table" class="ui-responsive"> 
<thead> 
<tr> 
<td> 商 品 ID</td> 
<td> 商 品名 称 </td> 
<td> 商 品 单价 </td> 
<td> 进 货 渠道 </td> 
<td> 销 售 量 </td> 
</tr> 
</thead> 
<tbody> 
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<tr> 
<td>11111111</td> 
<td> 苹 果 手 机 </td> 
<td>5000</td> 
<td> 苹 果 专 卖 店 </td> 
<td>100</td> 
</tr> 
<tr> 
<td>23332211</td> 
<td>Mac Pro 电脑 </td> 
<td>9000</td> 
<td> 苹 果 专 卖 店 </td> 
<td>50</td> 
</tr> 
<tr> 
<td>12343421</td> 
<td> 蕴 果 手 机 </td> 
<td>5000</td> 
<td> 蔷 果 专 卖 店 </td> 
<td>100</td> 
</tr> 
</tbody> 
</table> 
</div> 
<div data-role="footer"> 
<hl> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 
在 上 面 的 代码 中 ， 定 义 的 table 就 是 一 个 响应 式 的 表格 ,会 根据 屏幕 的 大 小 调整 布局 。 打 开 
Chrome 浏览 器 的 控制 台 ， 首 先 查看 这 个 表格 在 Ipad 上 的 展现 形式 ， 如 图 23-11 所 示 。 可 以 看 到 ， 
表格 是 正常 展示 的 ， 这 时 屏幕 的 宽度 足以 展现 所 有 列 。 
现在 改变 设备 为 iPhone 6， 再 查看 效果 ， 如 图 23-12 所 示 。 由 于 设备 的 宽度 不 够 ， 表 格 自动 变 
成 了 垂直 展现 的 ， 这 就 是 回流 表格 的 响应 式 效果 。 
想 将 一 个 表格 定义 为 回流 表格 , 首先 要 将 这 个 表格 声明 为 table 组 件 , 将 table 标签 的 table-role 
属性 值 设置 为 table， 接 下 来 为 这 个 表格 添加 一 个 ui-responsive 类 。 
另外 需要 注意 的 是 ， 如 果 想 使 用 jQuery Mobile 中 的 响应 式 表格 ， 就 必须 指定 它们 完整 的 table 
结构 ,包括 thead 和 tbody 等 标签 ， 因 为 这 样 jQuery Mobile 才能 根据 表格 的 不 同 组 成 成 分 来 决定 在 
屏幕 尺寸 变幻 时 如 何 展现 表格 。 例 如 ， 在 回流 表格 中 ,jQuery Mobile 其 实 需要 获取 thead 中 的 表 头 
信息 和 tbody 中 的 表格 内 容 才 能 制作 出 对 应 的 垂直 展现 效果 。 如 果 没有 设置 thead 和 tbody, 表格 的 
布局 就 会 乱 。 
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23.6.2” 列 切换 表格 


如 果 不 想 在 屏幕 缩小 时 改变 表格 的 布局 ， 响 应 式 表格 还 有 另 一 种 展现 方式 ， 即 列 切换 表格 。 
这 种 表格 的 特点 是 ， 当 屏幕 缩小 时 表格 的 排列 方式 不 变 ， 而 是 隐藏 掉 某 些 列 , 也 就 是 显示 一 个 不 完 
整 的 表格 。 这 样 做 虽 可 以 保证 表格 的 展现 方式 不 变 ， 但 需要 隐藏 一 些 次 要 的 列 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"> </script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"> </script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="panel" id="panel Test" data-position="right" data-display="overlay"> 
可 滑动 的 面板 
</div> 
<div data-role="header"> 
<hl> 页 面 头 部 <hl> 
</div> 
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<div data-role="main"> 
<table data-role="table" data-mode="columntoggle" class="ui-responsive" id= "myTable"> 
<thead> 
<tr> 
<td data-priority="1"> 商 品 ID</td> 
<td data-priority="2"> 商 品名 称 </td> 
<td data-priority="3"> 商 品 单价 </td> 
<td data-priority="4"> 进 货 渠 道 </td> 
<td data-priority="5"> 销 售 量 </td> 
<tr> 
</thead> 
<tbody> 
<tr> 
<td>11111111</td> 
<td> 苹 果 手 机 </td> 
<td>5000</td> 
<td> 苹 果 专卖 店 </td> 
<td>100</td> 
</tr> 
<tr> 
<td>23332211</td> 
<td>Mac Pro 电脑 </td> 
<td>9000</td> 
<td> 苹 果 专卖 店 </td> 
<td>50</td> 
</tr> 
<tr> 
<td>12343421</td> 
<td> 苹 果 手 机 </td> 
<td>5000</td> 
<td> 苹 果 专卖 店 </td> 
<td>100</td> 
</tr> 
</tbody> 
</table> 
</div> 
<div data-role="footer"> 
<hl> 底 部 菜单 栏 <hl> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


在 上 面 的 代码 中 , 表 头 中 的 data-priority 属性 用 来 指定 各 个 列 之 间 的 
表示 越 不 重要 ， 在 显示 表格 时 就 会 优先 省 略 这 些 不 重要 的 列 。 











要 程度 关系 。 其 值 越 大 ， 





jQuery Mobile 的 触摸 事件 


本 章 内 容 要 点 : 

米 理解 jQuery Mobile 移动 开发 框架 

%* jQuery Mobile 事件 

开发 者 可 以 选择 使 用 原生 的 方式 进行 移动 应 用 开发 。 原 生 开 发 指 的 是 只 使 用 JavaScript. 
jQuery、HTML、CSS 等 技术 实现 。 每 次 进行 移动 应 用 原生 开发 可 能 需要 一 些 重复 的 工作 ， 而 且 有 
很 多 移动 开发 的 细节 会 让 开发 者 “ 踩 坑 ”。 这 时 ， 使 用 一 些 移动 开发 的 框架 会 大 大 提高 开发 效率 。 

移动 端的 开发 框架 能 带 来 什么 呢 ? 

首先 ， 移 动 端 开发 框架 可 以 为 开发 者 提供 一 些 内 置 的 组 件 ， 这 些 组 件 都 是 移动 端 应 用 常用 的 
组 件 ， 样 式 是 经 过 精心 设计 的 。 每 当 开发 一 个 移动 端 应 用 时 ， 都 想 使 用 一 些 组 件 ， 例 如 底部 的 菜单 
栏 。 有 了 jQuery Mobile 封装 好 的 组 件 ， 就 可 以 大 大 减少 工作 量 。 同 时 ， 由 于 jQuery Mobile 中 的 组 
件 都 经 过 很 好 的 封装 和 设计 ， 因 此 只 要 调用 组 件 的 方式 没有 问题 ， 使 用 的 组 件 一 般 不 会 出 现 bug 
等 问题 ， 同 时 会 有 很 好 的 样式 展现 。 

其 次 ， 在 移动 端 需要 触发 的 事件 与 电脑 端 不 同 。 在 前 面 的 内 容 中 曾经 介绍 过 ，click 事件 ( 单 
击 事件 ) 在 移动 端 是 无 法 触发 的 ， 用 户 用 手 单 击 屏幕 并 不 会 触发 click 事件 。 此 外 ， 例 如 长 按 、 滑 
动 等 事件 ， 使 用 JavaScript 中 提供 的 基本 事件 已 经 无 法 满足 需求 了 。jQuery 则 为 开发 者 提供 了 丰富 
的 移动 端 事件 。 
最 后 ，jQuery Mobile 的 兼容 性 很 好 。 对 于 不 同 操作 系统 的 移动 设备 ，jQuery Mobile 的 底层 实 
现 语言 不 同 ，jQuery Mobile 借助 的 HTML, CSS. JavaScript 语言 也 都 是 目前 的 标准 语言 。 
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24.1 开始 使 用 jQuery Mobile 


使 用 jQuery Mobile 和 使 用 jQuery 一 样 , 只 要 引入 对 应 的 文件 就 可 以 了 。 jQuery Mobile 对 应 需 
要 引入 三 个 文件 。 因 为 jQuery Mobile 是 依赖 于 jQuery 的 ， 所 以 要 引入 jQuery 文件 。 此 外 ， 还 需 
要 引入 jQuery Mobile 的 样式 文件 和 JavaScript 文件 。 

一 定 要 注意 文件 的 引入 顺序 。 在 JavaScript 部 分 中 ， 曾 经 强调 过 , 文件 的 引入 顺序 决定 了 文件 被 
编译 执行 的 顺序 。 这 里 必须 先 引 入 jQuery 的 JavaScript 文件 ， 再 引入 jQuery Mobile 的 JavaScript 文 
件 ， 因 为 jQuery Mobile 是 依赖 于 jQuery 的 ，jQuery Mobile 文件 中 的 代码 会 引用 jQuery 中 的 方法 。 

完整 的 jQuery Mobile 文件 代码 如 下 : 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 

<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 

<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 

</style> 

</head> 

<body> 

<div class = "main"> </div> 

<input value = "red" type = "button" id = "red" /> 

<input value = "green” type = "button" id = "green" / > 

<input value = "yellow" type = "button" id = "yellow" /> 

<script> 

/JQuery Mobile 的 代码 

</script> 

</body> 

</html> 


接 下 来 ， 就 可 以 使 用 jQuery Mobile 中 提供 的 丰富 API 进行 移动 应 用 开发 了 。 
24.2 jQuery Mobile 事件 


在 原生 的 JavaScript 中 ， 有 很 多 常用 的 事件 ， 如 单 击 事件 、 鼠 标 滑动 、 键 盘 按键 等 事件 ， 这 些 
事件 涵盖 了 PC 端 所 有 用 户 可 能 触发 的 交互 事件 。 然 而 ， 在 移动 端 ， 有 一 些 事件 就 派 不 上 用 场 了 。 
同时 ， 移 动 端 又 出 现 了 很 多 新 的 事件 ， 使 用 原来 的 JavaScript 中 定义 的 事件 是 无 法 触发 的 ， 如 触摸 
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事件 、 滑 动 屏幕 等 事件 。 好 在 jQuery Mobile 为 开发 者 封装 了 很 多 移动 端 可 能 触发 的 事件 ， 使 用 
jQuery Mobile 封装 的 事件 可 以 很 方便 地 处 理 移 动 端 用 户 的 交互 行为 。 

如 何 模拟 触发 这 些 jQuery Mobile 中 提供 的 移动 端 事件 呢 ? 一 种 方法 是 使 用 在 本 书 最 开始 介绍 
的 移动 端 应 用 一 般 调试 方法 ， 直 接 在 手机 中 进行 调试 。 另 一 种 方式 是 在 Chrome 浏览 器 中 的 设备 调 
试 中 进行 调试 。 在 这 种 调试 方法 中 ， 鼠 标的 单 击 模拟 的 就 是 用 户 手指 的 触摸 事件 。 

如 果 开 发 者 定义 了 一 个 click 事件 ， 那 么 在 Chrome 浏览 器 中 的 设备 调试 中 使 用 鼠标 单 击 进行 
测试 时 click 事件 是 不 会 被 触发 的 。 在 device 调试 中 ， 鼠 标 就 变 成 了 人 的 手指 ， 鼠 标的 操作 对 应 的 
都 是 手指 的 操作 ， 便 于 开发 者 进行 代码 的 调试 。 


243 ”触摸 事件 


触摸 事件 是 移动 端的 常用 事件 之 一 ， 用 户 在 移动 应 用 上 的 各 种 操作 都 需要 在 智能 手机 屏幕 上 
和 触摸。 下面 就 介绍 jQuery Mobile 中 提供 的 和 触摸 相关 的 事件 。 


24.3.1 tap 一 一 手指 单 击 一 次 


在 jQuery Mobile 中 ,手指 单 击 一 次 的 事件 是 tap 事件 。 在 jQuery Mobile 中 ,监听 事件 可 以 使 
用 jQuery 中 的 on 方法。 下 面 的 例子 为 一 个 按钮 元 素 绑 定 了 tap 事件 。 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 
<a id = "tap" href = "#" data-role = "button"> 触 摸 我 会 触发 事件 </a> 
<p class = "content"></p> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </h1> 
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</div> 

</div> 

<script> 

$("#tap").on("tap", function () { 
S$(".content").html(" 触 发 了 手指 单 击 事件 ") 

D 

</script> 

</body> 

</html> 


单 击 按钮 ， 效 果 如 图 24-1 所 示 。 
页 面 头 部 
触摸 我 会 触发 事件 


触发 了 手指 点 击 事件 


底部 菜单 栏 





图 24-1 
jQuery Mobile 中 封装 的 这 些 事件 对 象 和 原生 的 JavaScript 中 的 事件 对 象 类 似 , 也 有 target 等 属 


下 面 的 代码 使 用 tap 事件 对 象 的 target 属性 ， 单 击 按钮 后 修改 按钮 的 样式 。 
【示例 】 

<!DOCTYPE> 

<html> 

<head> 


<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role="main"> 
<a id="tap" href="#" data-role="button"> 触 摸 我 会 触发 事件 </a> 
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<p class="content"></p> 
</div> 
<div data-role="footer"> 
<hl> 底 部 菜单 栏 </hl> 
</div> 
</div> 
<script> 
$("#tap").on("tap", function (e) í 
$(".content").html(" 触 发 了 手指 单 击 事件 ") 
$(e.target).addClass('ui-btn-b'); 


效果 如 图 24-2 所 示 。 == 
在 上 面 的 代码 中 , 当 开 发 者 单 击 按钮 时 触发 tap 事件 。 


tap 事件 使 用 $() 方 法 将 etarget 封装 成 一 个 jQuery 对 象 , 并 


调用 jQuery 中 的 addClass0 方 法 为 其 添加 一 个 jQuery 





Mobile 中 的 类 ， 将 按钮 颜色 变 为 黑色 。etarget 获取 到 的 就 | 乱 魏 了 于 指点 击 事件 

是 这 个 单 击 的 目标 元 素 ， 这 跟 JavaScript 中 的 事件 对 象 是 底部 菜单 栏 
- 样 的 。 

24.3.2 taphold 一 一 手指 长 按 事件 图 24-2 


如 果 手 指 在 屏幕 上 长 按 ， 就 会 触发 taphold 事件 。 例 如 ，iPhone 手机 在 发 送 短信 的 时 候 ， 在 输 
入 文本 的 文本 框 中 长 按 ， 就 会 生成 一 个 工具 栏 ， 包 括 复 制 、 粘 贴 、 选 择 等 按钮 。 这 时 触发 的 就 是 
taphold 事件 。 下 面 是 一 个 使 用 taphold 的 例子 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "header"> 
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</div> 
<div data-role = "main"> 
<input type = "text" id = "taphold" placeholder = "长 按 触发 事件 " > 
<p style = "display:none"> 隐 藏 内 容 展 现 </p> 
</div> 
<div data-role="footer"> 
<hl> 底 部 菜单 栏 <h1> 
</div> 
</div> 
<script> 
$("#taphold").on("taphold", function () í 
$("p").showO); 
D) 
</script> 
</body> 
</html> 


个 taphold 事件 。 长 按 这 个 输入 框 的 时 候 ， 就 会 触发 taphold 事 
件 ， 将 隐藏 的 内 容 展 现 出 来 ， 效 果 如 图 24-3 所 示 。 


24.3.3 ”swipe 一 一 滑动 事件 


件 。 


触发 swipe 事件 。 下 面 的 示例 使 用 swipe 事件 来 实现 手指 滑 


上 面 的 代码 定义 了 一 个 文本 框 , 并 为 这 个 模板 块 绑 定 了 一 








当 用 户 手指 在 屏幕 上 滑动 时 ， 就 会 触发 swipe 相关 的 事 
当 手 指 在 屏幕 上 向 上 、 下 、 左 、 右 滑动 一 定 距离 时 就 会 


图 24-3 


动 更 换 界面 背景 色 的 功能 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 


<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page"> 

<div data-role = "header"> 

<hl> 页 面 头 部 <hl> 
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</div> 
<div data-role = "main"> 
页 面 主体 部 分 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </hl> 
</div> 
</div> 
<script> 
$("[data-role = 'page']").on('swipe', function (e) í 
$("[data-role = 'page']").css("background", "blue"); 
») 
</script> 
</body> 
</html> 


除了 swipe 方法 外 ， 还 有 两 个 和 滑动 相关 的 事件 ， 分 别 是 swipeleft 和 swiperight， 这 两 个 事件 分 
别 在 向 左 或 向 右 滑动 时 触发 。 下 面 使 用 这 两 个 方法 在 向 不 同方 向 滑动 时 为 元 素 指定 不 同 的 背景 颜色 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 
页 面 主体 部 分 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </hl> 
</div> 
</div> 
<script> 
$("[data-role='page']").on('swipeleft', function (e) í 
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$("[data-role= page']").css("background", "blue"); 
D 
$("[data-role='page']").on('swiperight', function (e) í 
$("[data-role='page']").css("background", "yellow"); 


当 手 指向 左 滑动 时 ， 界 面 背景 颜色 变 为 蓝 色 ， 当 手指 向 右 滑 动 时 ， 界 面 背 景 颜色 变 为 黄色 。 
2434 设备 转动 事件 


当 使 用 移动 设备 时 ， 经 常会 出 现 旋转 屏幕 的 情况 。 例 如 ， 在 看 视频 的 时 候 ， 可 能 就 需要 将 设 
备 转换 为 水 平 ， 界 面 也 会 发 生 相 应 变化 。 


1. orientationchange 事件 


在 jQuery Mobile 中 ， 提 供 了 监听 设备 转动 的 事件 orientationchange。 设 备 转动 的 事件 绑 定 到 
window 对 象 上 ， 当 设备 转动 的 时 候 就 会 触发 orientationchange 事件 。 在 下 面 的 例子 中 ， 当 旋转 屏 
幕 使 屏幕 的 方向 发 生变 化 时 ， 将 界面 的 背景 颜色 变 为 绿色 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role="main"> 
页 面 主体 部 分 
</div> 
<div data-role="footer"> 
<h1> 底 部 菜单 栏 </h1> 
</div> 
</div> 
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<script> 

$(window).on("orientationchange", function () í 
$("[data-role='page']").css("background", 'blue'); 

1); 

</script> 

</body> 

</html> 


可 以 直接 在 自己 的 手机 中 调试 ， 除 此 之 外 ， 在 Chrome 浏 Phone5v 320 x 568 100%v © 
览 器 的 设备 调试 中 也 可 以 模拟 出 屏幕 旋转 的 效果 。 在 Chrome 
浏览 器 设备 调试 界面 中 单 击 如 图 24-4 所 示 的 图 标 ， 即 可 模拟 
设备 旋转 。 页 面 主体 部 分 
如 何 判断 设备 在 旋转 后 是 纵向 的 还 是 横向 的 ? 
orientationchange 事件 对 象 中 有 一 个 orientation 属性 值 , 可 以 返 
回 当前 设备 的 方向 。 当 设备 是 纵向 的 时 候 ，orientationchange 图 24-4 
事件 对 象 的 orientation 属性 值 为 portrait; 当 设备 是 横向 的 时 候 ， 
orientationchange 事件 对 象 的 orientation 属性 值 为 landscape。 下 面 利用 orientation 属性 值 根据 屏幕 
朝向 的 不 同 改变 界面 内 容 。 

【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role="main"> 
页 面 主体 部 分 
</div> 
<div data-role="footer"> 
<hl> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
$(window).on("orientationchange", function (e) í 
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if (e.orientation == 'portrait') í 
S$C[data-role=main']").html(" 设 备 是 纵向 的 "); 
$("[data-role='page']").css("background", "blue"); 

yelse if (e.orientation == 'landscape') í 
S$("[data-role='main']").html(" 设 备 是 横向 的 "); 
$("[data-role='page']").css("background", "yellow"); 

} 

H: 

</script> 

</body> 

</html> 

2. orientation 属性 


jQuery Mobile 中 还 直接 为 window 对 象 绑 定 了 一 个 orientation 属性 , 这 个 属性 可 以 在 任何 位 置 
直接 获取 到 当前 设备 的 方向 状态 。window.orientation 属性 值 有 三 种 返回 值 。 当 设备 是 纵向 朝向 的 
时 候 ，window.orientation 属性 值 返回 0， 当 顺 时 针 转 动 屏幕 90 度 时 ，window.orientation 属性 值 返 
回 90; 当道 时 针 转 动 屏幕 90 度 时 ，window.orientation 属性 值 返回 -90 度 。 


24.3.5 “屏幕 滚动 事件 


当 用 户 使 用 手指 滑动 屏幕 ， 进 行 屏 幕 滚动 时 ， 可 以 触发 相应 的 滚动 事件 。 在 jQuery Mobile 中 ， 
scrollstart 事件 在 屏幕 开始 滚动 时 触发 ，scrollstop 事件 在 屏幕 结束 滚动 时 触发 。 屏 幕 滚动 可 以 监听 
用 户 在 屏幕 上 的 滚动 事件 , 这 在 一 些 新 闻 客户 端 等 浏览 类 的 移动 应 用 中 很 常用 。 开 发 者 可 以 使 用 这 
个 事件 来 监听 用 户 在 界面 上 的 浏览 情况 。 例 如 ， 判 断 用 户 浏览 一 部 分 新 闻 内 容 所 花 的 时 间 ， 可 以 使 
用 滚动 相关 事件 来 获取 滚动 持续 的 时 间 。 

下 面 使 用 scrollstart 事件 和 scrollstop 事件 在 浏览 器 滑动 的 时 候 改 变 界 面 样式 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 

<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1"/> 














<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page"> 

<div data-role = "header"> 

<hl> 页 面 头 部 <hl> 
</div> 
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<div data-role = "main"> 
页 面 主体 部 分 
</div> 
<div data-role = "footer"> 
<h1> 底 部 菜单 栏 </h1> 
</div> 
</div> 


<script> 





$(document).on("scrollstart", function () í 
$("[data-role = 'page']").css("background", "blue"); 
J); 
$(document).on("scrollstop", function () í 
$("[data-role = 'page']").css("background", "yellow"); 
J): 
</script> 
</body> 
</html> 


243.6 ”页 面 事件 
页 面 事件 是 jQuery Mobile 中 封装 的 另 一 类 事件 。 这 些 事件 往往 发 生 在 页 面 之 间 的 切换 、 过渡、 


页 面 初始 化 等 上 。 页 面 事件 的 用 处 很 广泛 ， 因 为 它 和 页 面 的 加 载 展现 息息相关 。 下 面 对 jQuery 
Mobile 中 的 四 类 页 面 事件 进行 介绍 。 


1. 页 面 初始 化 相关 事件 


在 jQuery Mobile 中 ， 一 个 界面 在 展现 给 用 户 之 前 1 
过 程 中 会 触发 三 种 事件 ， 如 表 24-1 所 示 。 








要 先进 行 界面 的 初始 化 。 界 面 在 初始 化 的 





表 24-1 界面 初始 化 事件 














事 件 说 i) 

pagebeforecreate | 当 页 面 即将 初始 化 ， 并 且 在 jQuery Mobile 已 开始 增强 页 面 之 前 触发 该 事件 
pagecreate 当 页 面 已 创建 ， 但 增强 完成 之 前 触发 该 事件 

pageinit 当 页 面 已 初始 化 ， 并 且 在 jQuery Mobile 已 完成 页 面 增强 之 后 触发 该 事件 


2. 页 面 加 载 相关 事件 
界面 在 加 载 过 程 中 会 触发 两 种 事件 ， 如 表 24-2 所 示 。 
表 24-2 界面 加 载 事件 


o G 说 i) 
pagebeforeload | 在 任何 页 面 加 载 请 求 做 出 之 前 触发 


pageload 在 页 面 已 成 功 加 载 并 插入 DOM 后 触发 


如 果 界 面 加 载 失败 ， 则 会 触发 表 24-3 中 的 事件 。 
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表 24-3 ”界面 加 载 失败 事件 


事 件 说 明 





pageloadfailed 如 果 页 面 加 载 请 求 失败 ， 就 触发 该 事件 ， 默 认 显 示 "Error Loading Page" 消 息 





3. 页 面 过渡 相 关 事件 
在 界面 之 间 过 渡 时 ， 可 能 会 触发 表 24-4 中 的 事件 。 
3244 ”界面 过 渡 事 件 

















事 件 说 明 

pagebeforeshow | 在 “去 的 ”页 面 触发 ， 在 过 渡 动 画 开始 前 
pageshow 在 “去 的 ”页 面 触发 ， 在 过 渡 动 画 完成 后 
pagebeforehide 在 “来 的 ”页 面 触发 ， 在 过 渡 动 画 开始 前 
pagehide 在 “来 的 ”页 面 触发 ， 在 过 渡 动 画 完成 后 


4. 页 面 变化 相关 事件 
界面 发 生变 化 时 ， 可 能 会 触发 表 24-5 中 的 事件 。 
表 24-5 界面 变化 事件 


事 件 说 BB 
在 页 面 变化 周期 内 触发 两 次 : 任意 页 面 加 载 或 过 渡 之 前 触发 一 次 ， 接 下 来 在 页 面 成 功 
完成 加 载 后 ， 但 是 在 浏览 器 历史 记录 被 导航 进程 修改 之 前 触发 一 次 
pagechange 在 changePage(O) 请 求 已 完成 将 页 面 载 入 DOM 并 且 所 有 页 面 过 渡 动画 已 完成 后 触发 
pagechangefailed | 当 changePageO) 请 求 对 页 面 的 加 载 失败 时 触发 





pagebeforechange 








jQuery Mobile 表单 


本 章 内 容 要 点 : 
% jQuery Mobile 中 表单 的 基本 结构 


在 jQuery Mobile 中 ， 针 对 开发 者 最 常用 的 表单 提供 了 样式 和 功能 上 的 封装 ，jQuery Mobile 会 
自动 为 表单 添加 一 些 适用 于 移动 设备 的 样式 , 极 大 地 减少 了 在 样式 上 进行 开发 的 工作 量 。 本 章 将 介 
绍 jQuery Mobile 中 表单 的 基本 使 用 方法 。 


25.1 jQuery Mobile 中 表单 的 基本 结构 


jQuery Mobile 中 的 表单 结构 和 一 般 的 HTML 结构 类 似 。 下 面 给 出 一 个 典型 的 jQuery Mobile 
表单 结构 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 

<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" /> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 

<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 

<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
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</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 
<form method = "post" action = "do"> 
<label for = "username" >% 4 :</label> 
<input type = "text" name = "usemame" id = "usemame"> 
<label for = "age"> 年 龄 :</label> 
<input type = "text" name = "age" id = "age"> 
<input type = "submit" data-inline = "true" value = "提交 "> 
</form> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


在 jQuery Mobile 中 ， 所 有 表单 元 素 包含 在 一 个 form 标 
签 中 , 必须 为 form 标签 指定 method 属性 和 action 属性 来 表示 
数据 提交 的 方式 和 提交 路 径 。 每 一 个 表单 元 素 都 包括 一 个 
label 标签 和 一 个 input 标签 ， 二 者 称 为 一 组 表单 项 。 最 后 ， 可 
能 还 要 设 定 一 个 提交 按钮 , 用 来 提交 表单 , 这 和 一 般 的 HTML 
表单 结构 类 似 。jQuery Mobile 自动 为 这 些 表 单 添加 了 适应 于 
移动 端的 CSS 样式 ， 效 果 如 图 25-1 所 示 。 





图 25-1 


25.2 表单 样式 


25.2.1 ”隐藏 标 签 内 容 


在 移动 开发 的 更 多 情况 下 ， 不 希望 使 用 label 标签 中 的 文字 ， 而 是 使 用 输入 框 内 部 的 提示 信息 
来 表示 不 同 输入 框 输入 的 内 容 ， 这 样 更 加 美观 。 可 以 为 label 标签 指定 ui-hidden-accessible 类 ， 隐 
藏 标签 内 容 。 同 时 ， 可 以 使 用 HTML 中 的 placeholder 属性 来 设 定 输入 框 的 提示 信息 。 
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【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" > 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 
<form method = "post" action = "do"> 
<label for = "username" class = "ui-hidden-accessible"> 姓 名 :</label> 
<input type = "text" name = "usemame" id = "usemame" placeholder = "请 输入 姓名 "> 
<label for = "age" class = "ui-hidden-accessible"> 年 龄 :</label> 
<input type = "text" name = "age" id = "age" placeholder = "请 输入 年 龄 "> 
<input type = "submit" data-inline = "true" value = "提交 "> 
</form> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 





效果 如 图 25-2 所 示 。 
25.2.2 为 输入 框 添加 小 图 标 


为 表单 添加 图 标 很 简单 ， 使 用 之 前 介绍 的 data-icon 完成 。 
下 面 使 用 data-icon 为 表单 添加 一 些 对 应 的 图 标 。 





25-2 
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【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" /> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 
<form method = "post" action = "do"> 
<label for = "username" class = "ui-hidden-accessible"> 姓 名 :</label> 
<input type = "text" name = "usemame" id = "usemame" placeholder = "请 输入 姓名 " data-icon = 
"edit" data-iconpos="left"> 
<label for = "age" class = "ui-hidden-accessible"> 年 龄 :</label> 
age" id = "age" placeholder = "请 输入 年 龄 " data-icon = "comment" 





<input type = "text" name = 
data-iconpos="left"> 
<input type = "submit" data-inline = "true" value = "提交 "> 
</form> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


253 ”表单 的 种 类 


移动 端的 表单 输入 框 有 很 多 种 ， 下 面 对 常 用 的 表单 输入 框 进行 介绍 。 
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25.34 搜索 框 


如 果 想 定义 一 个 搜索 框 ， 可 以 直接 使 用 HTML5 中 的 search 类 型 input 标签 ， jQuery Mobile 会 
自动 为 定义 的 这 种 输入 框 指定 搜索 框 的 样式 ， 包 括 图 标 等 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" /> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page"> 

<div data-role = "header"> 

<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 





<form method = "post" action = "do"> 
<label for = "sear" class = "ui-hidden-accessible"> 搜 索 :</label> 
<input type = "search" name = "sear" id = "sear" placeholder = "请 输入 搜索 内 容 " /> 
<input type = "submit" data-inline = "true" value = "提交 "> 
</form> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 <h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


效果 如 图 25-3 所 示 。 页 面 头 部 
可 以 看 到 ， 我 们 没有 为 这 个 输入 框 指定 任何 样式 , jQuery |a 
Mobile 自动 为 搜索 类 型 的 输入 框 添加 了 小 图 标 。 


2532 ” 滑 块 输入 
滑 块 输入 是 移动 端 比较 常见 的 输入 框 ， 单 击 滑 块 输入 会 从 





提交 


底部 菜单 栏 








图 25-3 
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个 状态 切换 为 另 一 个 状态 。jQuery Mobile 中 提供 了 这 种 滑 块 输入 框 ， 要 想 将 一 个 input 标签 设 定 为 
滑 块 输入 框 ， 就 需要 将 这 个 input 标签 的 type 属性 设置 为 checkbox， 并 且 设 定 data-role 属性 值 为 
flipswitch 。 


默认 情况 下 ， 显 示 的 两 种 状态 的 文本 内 容 为 On 和 Off， 要 想 改变 提示 文本 ， 可 以 分 别 对 


data-on-text 属性 和 data-off-text 属性 进行 设 定 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" /> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page"> 

<div data-role = "header"> 

<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 
<form method = "post" action = "do"> 
<label for = "switch"> 上 线 提醒 功能 </label> 
<input type = "checkbox" data-role = "flipswitch" name = "switch" id = "switch" data-on-text = "打开 


" data-off-text = "关闭 '> 


</form> 
</div> 
<div data-role = "footer"> 
<h1l> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


效果 如 图 25-4 所 示 。 
可 以 看 到 ， 指 定 为 滑 块 的 input 标签 ， 会 有 和 原生 应 用 上 的 滑 。 | remmaog 





页 面 头 部 


块 相同 的 效果 。 


如 果 对 滑 块 的 颜色 不 满意 ， 可 以 自行 修改 。 查 看 Chrome 控制 





底部 菜单 栏 


E, 当 滑 块 开关 变 为 打开 状态 时 ,jQuery Mobile 其 实 是 为 这 个 input 
标签 添加 了 ui-flipswitch-active 类 , 在 这 个 类 上 进行 了 颜色 的 设 定 。 





25-4 
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因此 ， 如 果 想 修改 开启 状态 的 颜色 ， 可 以 直接 利用 选择 器 又 加 优先 级 的 原理 进行 设 定 。 
【示例 】 
<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" > 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
.mainForm .ui-flipswitch-active{ 
background-color: green; 
} 
</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 
<form method = "post" action = "do" class = "mainForm"> 
<label for ="switch"> 上 线 提醒 功能 </label> 
<input type = "checkbox" data-role = "flipswitch" name = "switch" id = "switch" data-on-text = "打开 
" data-off-text = "关闭 "> 
</form> 
</div> 
<div data-role = "footer"> 
<h1l> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


效果 如 图 25-5 所 示 。 

其 他 的 样式 ， 也 可 以 使 用 同样 的 方式 进行 设 定 。 
25.3.3 ” 单 选 框 和 复 选 框 

jQuery Mobile 中 的 单 选 框 和 复 选 框 的 定义 方式 和 HTML 类 


似 ， 单 选 框 对 应 的 input 标签 type 属性 值 为 radio， 复 选 框 对 应 的 
input 标签 type 属性 值 为 checkbox。 不 同 的 是 ，jQuery Mobile 需要 B125.5 
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使 用 fieldset 将 单 选 框 或 者 复 选 框 包围 起 来 , 并 且 指 定 data-role 属性 为 controlgroup, 表明 其 内 部 的 内 
容 为 一 组 选择 框 。 





【示例 】 单 选 框 的 定义 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 

<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" > 


<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
.mainForm .ui-flipswitch-active{ 
background-color: green; 
} 
</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 
<form method = "post" action = "do"> 
<fieldset data-role = "controlgroup"> 
<legend> 选 择 性 别 </legend> 
<label for = "male"> 男 </label> 
<input type = "radio" name = "gender" id = "male" value = "male"> 
<label for = "female"> 女 </label> 
<input type = "radio" name = "gender" id = "female" value = "female"> 
</fieldset> 
</form> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


【示例 】 多 选 框 的 定义 


<!DOCTYPE> 
<html> 
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<head> 
<meta charSet = "utf-8" /> 


<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" > 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
.mainForm .ui-flipswitch-active{ 

background-color: green; 
} 
</style> 
</head> 
<body> 
<div data-role = "page"> 

<div data-role = "header"> 

<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 





<form method = "post" action = "do"> 
<fieldset data-role = "controlgroup"> 
<legend> 选 择 您 要 购买 的 水 果 </legend> 
<label for = "apple"> 苹 果 </label> 
<input type = "checkbox" name = "faveolor" id = "apple" value = "apple"> 
<label for = "banana">#rf&</label> 
<input type = "checkbox" name = "favcolor" id = "banana" value = "banana"> 
<label for = "orange">}# f-</label> 
<input type = "checkbox" name = "favcolor" id = "orange" value = "orange"> 
</fieldset> 
</form> 
</div> 
<div data-role = "footer"> 
<h1> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


jQuery Mobile 列表 


本 章 内 容 要 点 : 
* 列表 的 制定 


列表 是 移动 端 应 用 中 一 个 十 分 常用 的 组 件 。 在 移动 端 应 用 中 ， 列 表 一 般 用 来 陈列 应 用 的 功能 ， 
或 者 进行 消息 显示 。 在 常用 的 聊天 软件 QQ、 微 信 等 即时 聊天 工具 中 ， 主 页 面 的 聊天 部 分 就 是 由 列 
表 组 成 的 。 本 章 将 介绍 列表 的 使 用 。 





26.1 简单 列表 


在 jQuery Mobile 中 ， 提 供 了 一 个 列表 组 件 list。 初 始 化 一 个 列表 项 目的 方法 是 ， 为 一 个 由 BR 
签 或 者 ol 标签 设置 data-role 属性 值 为 listview。 这 样 ， 这 个 ul 或 者 ol 元 素 就 变 成 了 一 个 列表 容器 ， 
其 内 部 的 列表 项 就 是 jQuery Mobile 中 的 一 个 个 列表 项 目 。 

下 面 的 示例 制定 了 一 个 基本 的 jQuery Mobile 列表 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 

<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" > 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 

<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
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<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 
<ul data-role = "listview"> 
<li> 
<a href = " 州 mks"> 我 是 列表 中 的 项 目 </a> 
<i> 
<l> 
<a href = " 州 inks"> 我 是 列表 中 的 项 目 </a> 
<i> 
<li> 
<a href="#inks"> 我 是 列表 中 的 项 目 </a> 
<i> 
</ul> 
</div> 
<div data-role = "footer"> 
<h1l> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


效果 如 图 26-1 所 示 。 

上 面 就 是 jQuery Mobile 声明 的 列表 的 基本 样式 。 

有 的 列表 内 容 比较 多 ， 需 要 按照 层次 显示 。jQuery Mobile | ”的 机 
中 提供 了 列表 分 割 组 件 list-divider， 被 设置 了 data-role 为 我 是 列表 中 的 项 目 
list-divider 的 1 标签 会 表现 为 列表 分 割 部 分 的 不 同样 式 。 我 是 列表 中 的 项 目 


页 面 头 部 


底部 菜单 栏 








【示例 】 ae 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 
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到 所 


"viewport" content = 





<meta name width = device-width, initial-scale = 1, maximum-scale = 1" /> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "header"> 
<hl> 页 面 头 部 </h1> 
</div> 
<div data-role = "main"> 
<ul data-role = "listview"> 
<li data-role = "list-divider"> 
项 目 一 
</li> 
<li> 
<a href="#inks"> 我 是 列表 中 的 项 目 </a> 
</li> 
<li> 
<a href = "#links ">R ÆFIR HRN H </a> 
<i> 
<li> 
<a href = "#links"> R JJ rh HN H </a> 
<Ni> 
<li data-role = "list-divider"> 
项 目 二 
</i> 
<li> 
<a href = "#links"> R ÆFIR rh HT H </a> 
</i> 
<li> 
<a href = "#links"> R ÆFIR rh HIN H </a> 
<Ni> 
<li> 
<a href = "#links"> R ÆFIR rh Bi H <a> 
</li> 
</ul> 
</div> 
<div data-role = "footer"> 
<h1l> 底 部 菜单 栏 </h1> 
</div> 
</div> 


<script> 
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</script> 
</body> 
</html> 


效果 如 图 26-2 所 示 。 

默认 情况 下 ， 每 一 个 列表 项 目 右 侧 的 图 标 都 是 右 箭头 。 这 个 图 标 可 以 通过 data-icon 属性 进行 
设置 , 为 1 标签 设 定 data-icon 属性 。 WRH data-icon 属性 设置 为 false, 那么 右 侧 不 会 出 现 小 图 标 。 
下 面 为 列表 项 设置 不 同 的 图 标 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" > 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page"> 

<div data-role = "header"> 

<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 





<ul data-role = "listview"> 
<li data-role = "list-divider"> 
项 目 一 
</li> 
<li data-icon = "comment"> 
<a href=" 州 inks"> 我 是 列表 中 的 项 目 </a> 
</i> 
<li data-icon = "check"> 
<a href=" 刘 inks"> 我 是 列表 中 的 项 目 </a> 
</i> 
<li data-icon = "eye"> 
<a href = " 州 inks"> 我 是 列表 中 的 项 目 </a> 
</i> 
<li data-role = "list-divider"> 
项 目 二 
<> 
<li data-icon = "heart"> 
<a href = " 州 inks"> 我 是 列表 中 的 项 目 </a> 
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</li> 
<li data-icon = "home"> 
<a href = " 州 mks"> 我 是 列表 中 的 项 目 </a> 
</li> 
<li data-icon = false> 
<a href = "区 inks"> 我 是 列表 中 的 项 目 </a> 
<i> 
</ul> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


效果 如 图 26-3 所 示 。 


页 面 头 部 
项 目 一 项 目 一 
我 是 列表 中 的 项 目 我 是 列表 中 的 项 目 
我 是 列表 中 的 项 目 我 是 列表 中 的 项 目 
我 是 列表 中 的 项 目 © 


我 是 列表 中 的 项 目 
项 目 二 
我 是 列表 中 的 项 目 


我 是 列表 中 的 项 目 


我 是 列表 中 的 项 目 我 是 列表 中 的 项 目 


我 是 列表 中 的 项 目 我 是 列表 中 的 项 目 


底部 菜单 栏 底部 菜单 栏 








图 26-2 图 26-3 


26.2 复杂 样式 的 列表 


上 面 展现 的 列表 效果 都 比较 简单 ， 如 果 开 发 者 想 实现 类 似 微 信 、QQ 等 聊天 的 列表 效果 ， 还 需 
要 学 习 一 些 jQuery Mobile 列表 的 其 他 功能 。 


2624 气泡 数字 


在 聊天 软件 中 ， 如 果 有 人 发 来 一 些 消息 ， 没 有 及 时 阅读 ， 就 会 在 列表 项 目的 右 侧 出 现 气 泡 提 
示 数 字 ， 以 显示 有 多 少 条 未 读 消息 。jQuery Mobile 也 提供 了 这 种 提示 效果 功能 ， 可 以 直接 使 用 。 
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如 果 和 希望 在 某 一 个 列表 中 添加 这 种 气泡 数字 的 效果 ， 可 以 在 1 标签 中 添加 span 标签 ， 并 为 其 指定 
ul-li-count 类 ， 这 样 span 标签 中 的 数字 就 会 显示 成 气泡 效果 了 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 


<meta name = 


viewport" content = 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page"> 

<div data-role = "header"> 

<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 


width = device-width, initial-scale = 1, maximum-scale = 1" /> 


<ul data-role = "listview"> 
<li data-icon = false> 
<a href = " 州 inks"> 小 张 <span class = "ui-li-count">1</span></a> 
</li> 
<li data-icon = false> 
<a href = " 州 inks"> 小 李 <span class = "ui-li-count">13</span></a> 
</li> 
<li data-icon = false> 
<a href = " 州 inks"> 未 知 消息 <span class = "ui-li-count">99+</span></a> 
</li> 
</ul> 
</div> 
<div data-role = "footer"> 
<h1> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


效果 如 图 26-4 所 示 。 
还 可 以 修改 这 些 气泡 的 样式 ， 下 面 让 这 些 气泡 看 起 来 更 像 消息 提示 。 
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【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content =" 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
.Con .alert í 
background: red; 
color: white; 
border-radius: 20px; 
上 
</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 
<ul data-role = "listview"> 
<li data-icon = false> 
<a href = "#links" class = "con"> 小 张 <span class = "alert ui-li-count">1</span></a> 
</li> 
<li data-icon = false> 
<a href = "#links" class = "con"> 小 李 <span class = "alert ui-li-count">13</span></a> 
</i> 
<li data-icon = false> 
<a href = "#links" class = "con"> 未 知 消息 <span class = "ui-li-count">99+</span></a> 
</li> 
</ul> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </hl> 
</div> 
</div> 


width = device-width, initial-scale = 1, maximum-scale = 1" /> 


<script> 
</script> 
</body> 
</html> 
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效果 如 图 26-5 所 示 。 

在 上 面 的 代码 中 ， 修 改 了 气泡 的 样式 ， 如 背景 色 、 圆 角 等 ， 让 它们 看 起 来 更 像 消息 提示 。 这 
里 使 用 了 CSS 选择 器 章节 中 介绍 过 的 优先 级 又 加 处 理 ， 这 种 方式 在 修改 元 素 样式 的 时 候 很 常用 。 
如 果 直 接 为 类 设置 CSS 样式 ， 就 可 能 会 被 框架 提供 的 原 有 样式 覆盖 。 因 此 ， 上 面 使 用 了 父 类 选择 
器 加 类 选择 器 的 方式 ， 为 span 元 素 的 父 元 素 a 元素 添加 了 辅助 类 ， 提 高 了 设置 样式 的 优先 级 。 








页 面 头 部 








26-4 图 26-5 
26.2.2 ”列表 图 标 


在 聊天 对 话 框 中 ， 左 侧 会 出 现 用 户 的 头像 ， 这 在 jQuery Mobile 中 也 可 以 实现 ，jQuery Mobile 
中 的 list 组 件 可 以 为 列表 的 左 侧 添加 列表 图 标 。 继 续 使 用 上 面 的 例子 , 为 这 些 列表 添加 “用 户头 像 ”。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" /> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
.Con .alert { 

background: red; 

color: white; 

border-radius: 20px; 
} 
</style> 
</head> 
<body> 
<div data-role = "page"> 

<div data-role = "header"> 

<hl> 页 面 头 部 <hl> 
</div> 
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<div data-role = "main"> 
<ul data-role = "listview"> 
<li data-icon = false> 
<a href = "#links" class = "con"><img src = "1.png" alt = "1" class = "ui-li-icon"> 小 张 <span class 
= "alert ui-li-count">1</span></a> 
</i> 
<li data-icon = false> 
<a href = "#links" class = "con"><img src = "2.png" alt = "2" class = "ui-li-icon"> 小 李 <span class 
= "alert ui-li-count">13</span></a> 
<i> 
<li data-icon = false> 
<a href = "#links" class = "con"><img src = "3.png" alt="3" class = "ui-li-icon"> 小 王 <span class = 
"ui-li-count">99+</span></a> 
<> 
</ul> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


效果 如 图 26-6 所 示 。 

现在 看 上 去 更 像 我 们 使 用 的 聊天 列表 了 。 头 像 的 大 小 也 可 
以 自行 调整 ,方法 和 上 面 调整 气泡 的 样式 类 似 。 需 要 注意 的 是 ， 
在 jQuery Mobile 中 ,列表 图 标 是 使 用 em 这 个 单位 进行 设 定 的 。 
如 果 忘 记 了 em 单位 的 含义 和 使 用 ， 可 以 到 前 面 的 相关 章节 进 
行 查看 。 
26.2.3 ”复杂 结构 的 列表 图 26-6 


上 面 的 列表 和 最 终 的 聊天 列表 还 有 差距 ， 聊 天 列表 中 还 会 有 历史 聊天 记录 等 信息 ， 想 实现 这 
种 功能 很 简单 ， 只 要 在 i 标签 中 使 用 正常 的 HTML 结构 即 可 。 下 面 就 来 优化 一 下 这 个 聊天 列表 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 

<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" > 


底部 菜单 栏 





<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
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<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 


<style type = "text/css"> 
„con „alert í 
background: red; 
color: white; 
border-radius: 20px; 
1 
ui-listview > .ui-li-has-icon > .ui-btn > img: first-child í 
left: 0.3em; 
top: 1.5em; 
max-height: 2em; 
max-width: 2em; 
l; 
</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 
<ul data-role = "listview"> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "1.png" alt = "1" class = "ui-li-icon icon-bg"> 
<h2> 小 张 </h2> 
<p> 在 么 ? ? ? </p> 
</a> 
<Ni> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "2.png" alt = "2" class = "ui-li-icon icon-bg"> 
<h2> 小 李 </h2> 
<p> 什 么 时 候 开始 上 班 全 <p> 
<span class = "alert ui-li-count">13</span> 
<a> 
<Ni> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "3.png" alt = "3" class = "ui-li-icon icon-bg"> 
<h2> 小 王 </h2> 
<p> 在 不 在 </p> 
<span class = "alert ui-li-count">99+</span> 
<la> 
</i> 
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</ul> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </hl> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


效果 如 图 26-7 所 示 。 


小 张 


在 6? ?9 


小 李 
frame ripu 


ÞE 
在 不 在 





2624 ”为 列表 添加 功能 


可 以 为 每 一 个 列表 项 添加 功能 。 例 如 ， 在 上 面 的 例子 中 ， 为 每 个 列表 添加 一 个 跳 转 页 面 ， 单 
击 跳 转 到 对 应 的 聊天 详情 页 。 这 可 以 通过 a 标签 的 href 属性 值 进 行 设 定 ， 将 a 标签 的 href 属性 指 
向 某 一 个 page 对 应 的 id 值 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" > 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
.Con .alert í 
background: red; 
color: white; 
border-radius: 20px; 
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-Ui-listview > .ui-li-has-icon > .ui-btn > img:first-child í 
left: 0.3em; 
top: 1.5em; 
max-height: 2em; 
max-width: 2em; 
} 
</style> 
</head> 
<body> 
<div data-role = "page"> 
<div data-role = "header"> 
<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 
<ul data-role = "listview"> 
<li data-icon = false> 
<a href = "#xiaozhang" class = "con"> 
<img src = "1.png" alt = "1" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: lem;"> 小 张 </h2> 
<p style = "margin-left: 1.4em;"> 在 么 ? ? ? </p> 
<a> 
</li> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "2.png" alt = "2" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: lem;"> 小 李 </h2> 





<p style = "margin-left: 1.4em:"> 什 么 时 候 开始 上 班 呈 </p> 


<span class = "alert ui-li-count">13</span> 
</a> 
</li> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "3.png" alt = "3" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: lem;"> 小 王 </h2> 
<p style = "margin-left: 1.4em;"> 在 不 在 </p> 
<span class = "alert ui-li-count">99+</span> 
</a> 
<Ni> 
</ul> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 <hl> 
</div> 
</div> 
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<div data-role = "page" id = "xiaozhang"> 
<div data-role = "main"> 和 小 李 的 聊天 记录 </div> 
</div> 
<script> 
</script> 
</body> 
</html> 


每 一 个 列表 项 还 可 以 进行 分 割 。 分 割 的 原理 是 在 一 个 列表 项 目 li 标签 内 定义 多 个 a 标签 ， 这 
样 就 可 以 实现 列表 项 目的 功能 划分 , 每 一 个 a 标签 会 对 应 一 个 功能 。 如果 定 义 了 两 个 a 标签, jQuery 
Mobile 就 会 自动 为 我 们 在 列表 项 右 侧 添加 一 个 分 割 块 ， 单 击 这 个 分 割 块 会 对 应 另 一 个 功能 。 下 面 
就 为 之 前 例子 中 的 某 一 个 列表 项 添加 分 割 功能 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" /> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
.Con .alert { 

background: red; 

color: white; 

border-radius: 20px; 
|; 
ui-listview > .ui-li-has-icon > .ui-btn > img:first-child { 

left: 0.3em; 

top: 1.5em; 

max-height: 2em; 

max-width: 2em; 
} 
</style> 
</head> 
<body> 
<div data-role = "page"> 

<div data-role = "header"> 

<hl> 页 面 头 部 <hl> 
</div> 
<div data-role = "main"> 
<ul data-role = "listview"> 
<li data-icon = false> 
<a href = "#xiaozhang" class = "con"> 
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<img src =" 1.png" alt = "1" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: lem;"> 小 张 </h2> 
<p style = "margin-left: 1.4em;"> 在 么 ? ? ? </p> 





</a> 
<i> 
<li data-icon = false> 
<a href = "#links" class = "con"> 





<img src = "2.png" alt = "2" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: lem;"> 小 李 </h2> 
<p style = "margin-left: l.4em:">fF Z BH 3F#8 EBE = </p> 
<span class = "alert ui-li-count">13</span> 
</a> 
<a href = "如 > 其 他 功能 </a> 
<> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "3.png" alt = "3" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: lem;'> 小 王 </h2> 
<p style = "margin-left: 1.4em;"> 在 不 在 </p> 
<span class = "alert ui-li-count">99+</span> 
</a> 
</li> 
</ul> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<div data-role = "page" id = "xiaozhang"> 
<div data-role = "main"> 和 小 李 的 聊天 记录 </div> 
</div> 
<script> 
</script> 
</body> 
</html> 


打开 浏览 器 ， 效 果 如 图 26-8 所 示 。 
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图 26-8 


是 不 是 很 像 QQ 中 手指 滑动 一 个 聊天 列表 时 对 应 展示 出 的 提示 框 ? 可 以 综合 之 前 学 过 的 知识 ， 
制作 出 这 个 效果 。 


jQuery Mobile 项 目 结构 


本 章 内 容 要 点 : 
Æ jQuery Mobile 项 目 结构 及 页 面 间 的 过 渡 效 果 


了 解 了 jQuery Mobile 中 各 种 组 件 、 样 式 设 定 、 基 本 功能 之 后 , 如 何 搭建 起 一 个 完整 的 移动 App 
应 用 呢 ? 本 章 介绍 App 应 用 程序 的 项 目 结构 ， 以 帮助 大 家 快速 掌握 App 实际 项 目 开 发 的 技能 。 


27.1 基本 结构 


之 前 介绍 过 ， 将 data-role 属性 值 定义 为 page, fE jQuery Mobile 中 就 实例 化 了 一 个 移动 应 用 界 
面 。 其 实 , 在 一 个 HTML 文档 中 可 以 实例 化 多 个 page, 从 而 构成 一 个 应 用 的 不 同 界面 。 每 一 个 page 
都 需要 为 其 设 定 一 个 id 属性 值 ， 这 个 id 属性 值 可 以 通过 a 标签 的 href 进行 指定 。 当 单 击 了 对 应 的 
href 时 ， 就 会 跳 转 到 对 应 的 page 定义 页 面 。 下 面 给 出 一 个 基本 的 例子 。 


【示例 】 


<!DOCTYPE> 

<html> 

<head> 

<meta charSet = "utf-8" /> 

<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" /> 








<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
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<style type = "text/css"> 

</style> 

</head> 

<body> 

<div data-role = "page" id="first"> 
<div data-role = "header"> 

<hl> 第 一 个 页 面 </h1> 

</div> 
<div data-role = "main"> 


<a href = "#second"> 跳 转 到 第 二 个 页 面 </a> 


</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 <h1> 
</div> 
</div> 


<div data-role = "page" id = "second"> 
<div data-role = "header"> 
<hl> 第 二 个 页 面 </h1> 
</div> 
<div data-role = "main"> 
<a href="#first"> 返 回 第 一 个 页 面 </a> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </hl> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


打开 浏览 器 查看 效果 ， 可 以 看 到 ， 当 单 击 两 个 a 标签 时 ， 会 跳 转 到 a 标签 中 href 属性 指定 的 
对 应 界面 ， 而 且 会 附带 过 渡 效 果 。 这 就 是 jQuery Mobile 中 定义 一 个 项 目 多 个 界面 的 方法 。 

简单 总 结 一 下 , 在 jQuery Mobile 的 项 目 中 ， 所 有 的 界面 都 定义 在 一 个 HTML 结构 中 。 每 个 页 
面 用 page 方法 指定 ， 其 内 部 的 内 容 就 是 某 一 个 page 页 面 的 具体 内 容 。 每 个 page 之 间 的 内 容 互 不 
影响 。 页 面 之 间 通 过 a 标签 的 href 属性 指定 id 值 ， 就 可 以 完成 界面 之 间 的 切换 。 

由 于 jQuery Mobile 中 的 所 有 页 面 都 被 定义 在 了 一 个 HTML 文档 中 ， 因 此 在 定义 元 素 id 的 时 
候 一 定 要 不 同 于 这 个 HTML 文档 中 任何 其 他 的 id 值 。 这 是 经 常 容易 犯错 误 的 地 方 。 

此 外 ， 需 要 注意 界面 发 生 切 换 时 URL 的 变化 ， 单 击 某 一 个 a 标签 后 ，URL 会 自动 在 后 面 添 加 
对 应 的 这 锚 。 
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27.2 页面 间 的 过 渡 


在 上 面 的 例子 中 ， 当 单 击 跳 转 到 其 他 页 面 时 ， 可 以 看 到 jQuery Mobile 为 页 面 跳 转 自 定义 了 动 
画 效果 。 这 个 过 渡 的 动画 效果 也 是 可 以 修改 的 。jQuery Mobile 内 置 了 多 重 页 面 间 的 过 渡 效 果 ， 以 
供 开发 者 选择 。 

jQuery Mobile 中 提供 的 这 些 页 面 之 间 切 换 的 过 渡 效 果 ， 都 是 基于 CSS3 动画 的 。 


27.2.1 淡 入 过 渡 一 一 fade 








控制 过 渡 效 果 的 属性 是 data-transition, 这 个 属性 值 需 要 设置 在 跳 转 界面 对 应 的 a 标签 上 。jQuery 
Mobile 中 默认 的 过 渡 效 果 是 fade， 是 一 种 淡 入 淡出 的 效果 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" /> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page" id="first"> 
<div data-role = "header"> 
<h1> 第 一 个 页 面 </hl> 
</div> 
<div data-role = "main"> 
<a href = "#second" data-transition="fade"> 跳 转 到 第 二 个 页 面 </a> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </hl> 
</div> 
</div> 
<div data-role = "page" id = "second"> 
<div data-role = "header"> 
<hl> 第 二 个 页 面 </hl> 
</div> 
<div data-role = "main"> 
<a href="#first" data-transition="fade"> 返 回 第 一 个 页 面 </a> 
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</div> 
<div data-role = "footer"> 
<h1> 底 部 菜单 栏 </h1> 

</div> 

</div> 

<script> 

</script> 

</body> 

</html> 


27.2.2 ”翻转 过 渡 


将 data-transition 属性 值 设置 为 fip， 可 以 实现 翻转 的 过 渡 效 果 。 这 种 效果 就 像 翻 书 一 样 ， 过 
渡 到 下 一 个 界面 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" /> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page" id="first"> 
<div data-role = "header"> 
<hl> 第 一 个 页 面 </h1> 
</div> 
<div data-role = "main"> 
<a href = "#second" data-transition = "flip"> 跳 转 到 第 二 个 页 面 </a> 





flip 


</div> 
<div data-role = "footer"> 
<h1> 底 部 菜单 栏 </h1> 
</div> 
</div> 


<div data-role = "page" id = "second"> 
<div data-role = "header"> 
<hl> 第 二 个 页 面 </hl> 
</div> 
<div data-role = "main"> 
<a href="#first" data-transition="flip"> 返 回 第 一 个 页 面 </a> 
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</div> 
<div data-role = "footer"> 
<h1> 底 部 菜单 栏 </h1> 

</div> 

</div> 

<script> 

</script> 

</body> 

</html> 


27.2.3” 抛 出 效果 一 一 flow 


将 data-transition 属性 值 设置 为 low， 可 以 实现 抛 出 效果 。 使 用 抛 出 效果 时 ， 界 面 会 先进 行 收 
缩 变换 ， 再 移出 屏幕 ， 转 而 进入 下 一 个 界面 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" /> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page" id="first"> 
<div data-role = "header"> 
<hl> 第 一 个 页 面 </hl> 
</div> 
<div data-role = "main"> 
<a href = "#second" data-transition = "flow"> 跳 转 到 第 二 个 页 面 </a> 


</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 <h1> 
</div> 
</div> 


<div data-role = "page" id = "second"> 
<div data-role = "header"> 
<hl> 第 二 个 页 面 </hl> 
</div> 
<div data-role = "main"> 
<a href="#first" data-transition="flow"> 返 回 第 一 个 页 面 </a> 
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</div> 
<div data-role = "footer"> 
<h1> 底 部 菜单 栏 </h1> 

</div> 

</div> 

<script> 

</script> 

</body> 

</html> 


27.2.4 滑动 效果 一 slide 


jQuery Mobile 中 提供 了 许多 可 以 实现 滑动 效果 的 过 渡 , 这 也 是 移动 应 用 中 最 常见 的 页 面 过 渡 。 
关于 滑动 过 渡 效 果 ，jQuery Mobile 中 提供 了 如 下 几 种 方式 : 


e slide 从 右 向 左 滑动 到 下 一 页 。 

@ slidefade 从 右 向 左 滑动 并 淡 入 到 下 一 页 。 
@ slideup 从 下 到 上 滑动 到 下 一 页 。 

@ slidedown 从 上 到 下 滑动 到 下 一 页 。 


下 面 给 出 一 个 从 右 向 左 滑动 到 下 一 页 的 例子 。 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" /> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page" id="first"> 
<div data-role = "header"> 
<hl> 第 一 个 页 面 </h1> 
</div> 
<div data-role = "main"> 
<a href = "#second" data-transition = "slide"> 跳 转 到 第 二 个 页 面 </a> 
</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </hl> 
</div> 
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</div> 
<div data-role = "page" id = "second"> 
<div data-role = "header"> 
<hl> 第 二 个 页 面 </h1> 
</div> 
<div data-role = "main"> 
<a href="#first" data-transition="slide"> 返 回 第 一 个 页 面 </a> 
</div> 
<div data-role = "footer"> 
<h1> 底 部 菜单 栏 </h1l> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


如 果 想 实现 从 左 向 右 滑动 ， 可 以 将 data-direction 属性 值 设 定 为 reverse, slide 过 渡 效 果 就 会 向 
着 相反 的 方向 进行 。 


【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" /> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page" id="first"> 
<div data-role = "header"> 
<h1> 第 一 个 页 面 </h1l> 
</div> 
<div data-role = "main"> 
<a href = "#second" data-transition = "slide"> 跳 转 到 第 二 个 页 面 </a> 


</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </hl> 
</div> 
</div> 


<div data-role = "page" id = "second"> 
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<div data-role = "header"> 
<hl> 第 二 个 页 面 </hl> 
</div> 
<div data-role = "main"> 
<a href="#first" data-transition="slide" data-direction="reverse"> 返 回 第 一 个 页 面 </a> 
</div> 
<div data-role = "footer"> 
<h1> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


27.2.5” 弹 窗 效 果 一 一 pop 


将 data-transition 属性 设置 为 popp， 可 以 实现 弹 窗 式 的 过 渡 效 果 。 
【示例 】 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1" /> 
<script src = "http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
</style> 
</head> 
<body> 
<div data-role = "page" id="first"> 
<div data-role = "header"> 
<hl> 第 一 个 页 面 </h1> 
</div> 
<div data-role = "main"> 
<a href = "#second" data-transition = "pop"> 跳 转 到 第 二 个 页 面 </a> 


</div> 
<div data-role = "footer"> 
<hl> 底 部 菜单 栏 </hl> 
</div> 
</div> 


<div data-role = "page" id = "second"> 
<div data-role = "header"> 
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<hl> 第 二 个 页 面 </hl> 
</div> 
<div data-role = "main"> 
<a href="#first" data-transition="pop"> 返 回 第 一 个 页 面 </a> 
</div> 
<div data-role = "footer"> 
<h1> 底 部 菜单 栏 </h1> 
</div> 
</div> 
<script> 
</script> 
</body> 
</html> 


项 目 实 战 : 聊天 APP 的 开发 


本 章 内 容 要 点 : 

* 聊天 应 用 程序 开发 技术 与 方法 

本 项 目 使 用 Web 前 端 技术 ， 开 发 了 一 个 类 似 于 QQ 的 聊天 应 用 ， 可 以 在 Android, iOS 等 移动 
设备 中 使 用 。 整 个 项 目 包括 聊天 人 列表 、 聊 天 详细 内 容 页 等 部 分 。 使 用 jQuery Mobile 作为 移动 应 
用 开发 框架 。 


28.1 移动 界面 编写 


28.11 ”聊天 列表 页 面 框架 搭建 


使 用 jQuery Mobile 搭建 一 个 基本 的 页 面 框架 。 聊 天 列表 页 面 主 要 分 为 三 个 部 分 ， 首 先是 页 面 
的 顶部 栏 和 底部 菜单 栏 ， 其 次 是 页 面 的 主题 列表 部 分 ， 展 示 好 友 聊 天 列表 ， 最 后 是 一 个 弹出 面板 ， 
可 以 展示 弹出 其 他 辅助 内 容 。 
整个 页 面 使 用 jQuery Mobile 搭建 的 代码 如 下 : 
<div data-role = "page"> 
<div data-role="panel" id="myPanel"> 


</div> 
<div data-role = "header" data-position="fixed"> 
<hl> 页 面 头 部 <hl> 
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</div> 
<div data-role = "main" id="main" class="ui-content"> 
</div> 
<div data-role = "footer" data-position="fixed" style="text-align:center;"> 
</div> 
</div> 


28.1.2 ”聊天 列表 制作 
聊天 列表 的 制作 使 用 jQuery Mobile 中 的 列表 组 件 , 并 进行 相关 样式 的 设 定 , HTML 代码 如 下 : 


<div data-role = "main" id="main" class="ui-content"> 
<ul data-role = "listview"> 
<li data-icon = false> 
<a href = "#xiaozhang" class = "con" data-transition="slide"> 
<img src = "images/1.png" alt = "1" class = "ui-| 
<h2 style = "margin-left: lem;"> 小 张 </h2> 
<p style = "margin-left: 1.4em;"> 好 一 </p> 





li-icon icon-bg"> 





</a> 
<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
</i> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/2.png" alt = "2" class = "ui-li-icon icon-bg"> 





<h2 style = "margin-left: lem;"> 小 李 </h2> 
<p style = "margin-left: 1.4em:"> 什 么 时 候 开始 上 班 芝 </p> 
<span class = "alert ui-li-count">13</span> 
</a> 
<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
</li> 
<li data-icon = false> 
<a href = "#links" class = "con"> 





<img src = "images/3.png" alt = "3" class = " 
<h2 style = "margin-left: 1em;">/hE</h2> 
<p style = "margin-left: 1.4em:"> 在 不 在 </p> 
<span class = "alert ui-li-count">2</span> 
<la> 
<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
<i> 
<li data-icon = false> 
<a href = "#links" class = "con"> 





<img src = "images/4.png" alt = "3" class = " 

<h2 style = "margin-left: lem;">Allen</h2> 

<p style = "margin-left: 1.4em;"> 拜 拜 </p> 

<span class = "alert ui-li-count">1</span> 
<la> 
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<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
</i> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/5.png" alt = "3" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: lem;"> 宝 宝 </h2> 
<p style = "margin-left: 1.4em;"> %19? </p> 
</a> 
<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
<> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/1.png" alt = "3" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: lem:"> Web 前 端 交流 群 </h2> 
<p style = "margin-left: 1.4em;'> 怎 么 使 用 JQuery Mobile 开发 ? </p> 
<span class = "alert ui-li-count">99+</span> 
</a> 
<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
</li> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/1.png" alt = "3" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: lem;"> 移 动 Web 开发 者 群 </h2> 
<p style = "margin-left: 1.4em;'> 推 荐 一 个 移动 Web 开发 框架 </p> 
<span class = "alert ui-li-count">99+</span> 


</a> 
<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
</li> 
</ul> 
</div> 
在 上 面 的 代码 中 , ul 包含 着 整个 聊天 列表 的 内 容 , 每 一 个 1i 表 Ik 
示 一 个 聊天 列表 项 ， 配 合 CSS 编写 聊天 项 的 样式 。 在 聊天 项 中 , 添 @ 
加 了 用 户头 像 、 用 户 昵 称 、 聊 天 部 分 内 容 ， 以 及 未 读 消息 ， 这 些 都 je 
是 充分 利用 jQuery Mobile 中 的 列表 组 件 实现 的 。 聊 天 列表 效果 如 图 @ nunen 
28-1 所 示 。 @ 小 王 
为 了 能 够 让 用 户 单 击 某 一 个 聊天 项 目 后 进入 对 应 的 聊天 内 容 “ë 
页 面 ， 可 以 为 每 一 个 聊天 列表 项 添加 超 链接 ， 从 而 跳 转 到 对 应 的 聊 @ “= 
天 详情 界面 中 。 a 
È 
Web 前 端 交流 群 





图 28-1 
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28.1.3 页面 头 部 和 底部 的 编写 


页 面 头 部 包含 应 用 的 标题 ， 并 且 仿照 QQ 设置 一 个 可 以 控制 弹出 面板 的 按钮 。 页 面 头 部 的 
HTML 代码 如 下 : 
<div data-role = "header" data-position="fixed"> 
<hl> 页 面 头 部 <hl> 
<a href="#myPanel" class="ui-btn ui-btn-inline ui-comer-all ui-shadow"> 
<img src = "images/1.png" alt = "1" class = "ui-li-icon icon-bg" style="width: 16px;height:16px;"> 
<a> 
</div> 


页 面 底 部 是 菜单 ， 主 要 列举 消息 、 联 系 人 、 动 态 三 个 功能 ， 页 面 底部 菜单 栏 的 HTML 代 码 如 下 : 
<div data-role = "footer" data-position="fixed" style="text-align:center;"> 
<div data-role="controlgroup" data-type="horizontal"> 
<a href="#" class="ui-btn-toll ui-btn ui-corner-all ui-shadow ui-icon-comment ui-btn-icon-top"> 消 息 


</a> 

<a href="#" class="ui-btn-toll ui-btn ui-corner-all ui-shadow ui-icon-user ui-btn-icon-top"> 联 系 人 
</a> 

<a href="#" class="ui-btn-toll ui-btn ui-corner-all ui-shadow ui-icon-star ui-btn-icon-top"> 动 态 </a> 

</div> 
</div> 
注意 页 面 头 部 和 底部 data-position="fixed" 的 使 用 : data-position 的 默认 值 为 inline, 设置 成 fixed 

后 ， 可 以 让 头 部 和 底部 固定 在 页 面 的 固定 位 置 。 


完成 后 的 整个 聊天 列表 页 面 效 果 如 图 28-2 所 示 。 


° 
@ 性 
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@ ww 
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宝宝 
am 





Æ 28-2 
聊天 列表 页 面 的 整体 代码 如 下 : 


<div data-role = "page"> 
<div data-role="panel" id="myPanel"> 
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</div> 
<div data-role = "header" data-position="fixed"> 
<hl> 页 面 头 部 <hl> 
<a href="#myPanel" class="ui-btn ui-btn-inline ui-comer-all ui-shadow"> 
<img src = "images/1.png" alt = "1" class = "ui-li-icon icon-bg" style="width: 16px;height:16px;"> 
<a> 
</div> 
<div data-role = "main" id="main" class="ui-content"> 
<ul data-role = "listview"> 
<li data-icon = false> 
<a href = "#xiaozhang" class = "con" data-transition="slide"> 









<img src = "images/1.png" alt = "1" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: lem;"> 小 张 </h2> 
<p style = "margin-left: 1.4em:"> 好 一 </p> 
</a> 
<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
<i> 


<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/2.png" alt = "2" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: lem;"> 小 李 </h2> 
<p style = "margin-left: 1.4em;"> 什 么 时 候 开始 上 班 写 </p> 
<span class = "alert ui-li-count">13</span> 
</a> 
<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
</li> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/3.png" alt = "3" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: lem:"> 小 王 </h2> 
<p style = "margin-left: 1.4em;'> 在 不 在 </p> 
<span class = "alert ui-li-count">2</span> 
</a> 
<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
</i> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/4.png" alt = "3" class = " 
<h2 style = "margin-left: 1em;">Allen</h2> 
<p style = "margin-left: 1.4em;'"> 拜 拜 </p> 
<span class = "alert ui-li-count">1</span> 
<la> 
<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
</i> 
<li data-icon = false> 





i-icon icon-bg"> 
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<a href = "#links" class = "con"> 
<img src = "images/5.png" alt = "3" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: 1lem;"> 宝 宝 </h2> 
<p style = "margin-left: 1.4em;"> 在 吗 ? </p> 
</a> 
<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
<i> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/1.png" alt = "3" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: 1em;">Web 前 端 交流 群 <h2> 
<p style = "margin-left: 1.4em;"> 怎 么 使 用 JQuery Mobile 开发 ? </p> 
<span class = "alert ui-li-count">99+</span> 
</a> 
<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
<i> 
<li data-icon = false> 
<a href = "#links" class = "con"> 





<img src = "images/1.png" alt = "3" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: lem;"> 移 动 Web 开发 者 群 </h2> 
<p style = "margin-left: 1.4em;"> 推 荐 一 个 移动 Web 开发 框架 </p> 
<span class = "alert ui-li-count">99+</span> 
</a> 
<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
</li> 
</ul> 
</div> 
<div data-role = "footer" data-position="fixed" style="text-align:center;"> 
<div data-role="controlgroup" data-type="horizontal"> 





<a href="#" class="ui-btn-toll ui-btn ui-corner-all ui-shadow ui-icon-comment ui-btn-icon-top"> 消 息 


</a> 
<a href="#" class="ui-btn-toll ui-btn ui-corner-all ui-shadow ui-icon-user ui-btn-icon-top"> 联 系 人 
</a> 
<a href="#" class="ui-btn-toll ui-btn ui-corner-all ui-shadow ui-icon-star ui-btn-icon-top"> 动 态 </a> 
</div> 
</div> 
</div> 


28.2 ”聊天 详情 页 面 搭建 


聊天 详情 页 面 是 在 聊天 列表 中 单 击 某 一 个 聊天 列表 项 进入 的 页 面 ， 显 示 了 具体 的 聊天 记录 ， 
用 户 可 以 在 这 里 查看 聊天 记录 或 者 编辑 、 发 送 聊 天 信息 。 该 页 面 主要 包含 三 个 部 分 ， 首先 是 页 面 头 
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部 ， 显 示 用 户 正在 聊天 的 用 户 名 。 接 下 来 是 页 面 的 主体 部 分 ， 显 示 聊 天 记录 。 最 后 是 输入 框 ， 用 户 
可 以 进行 新 消息 的 编写 、 发 送 。 聊 天 记录 使 用 jQuery Mobile 组 件 中 的 列表 组 件 完成 ， 底 部 的 输入 
使 用 jQuery Mobile 中 的 表单 完成 。 下 面 是 聊天 详情 页 的 HTML 代码 : 


<div data-role = "page" id = "xiaozhang"> 
<div data-role="header"> 
<hl> 小 张 </hl> 
</div> 
<div data-role = "main"> 
<ul data-role = "listview"> 
<li data-icon = false> 
<a href = "#links" class = "con"> 





<img src = "images/5.png" alt = "3" class = "ui-li-icon icon-bg" style="top:0.6em"> 
<p style = "margin-left: 1.4em;"> 有 哪个 医院 周末 也 正常 上 班 吗 ? </p> 
</a> 
<i> 


<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/1.png" alt = "3" class = "ui-li-icon icon-bg" style="top:0.6em:left:278px;"> 
<p style = "margin-right: 42px:;float:right"> 开 发 区 医院 啊 </p> 
</a> 
</li> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/1.png" alt = "3" class = "ui-li-icon icon-bg" style="top:0.6em;left:278px;"> 
<p style = "margin-right: 42px;float:right"> 你 生病 了 吗 </p> 
<la> 
</li> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/5.png" alt = "3" class = "ui-li-icon icon-bg" style="top:0.6em"> 
<p style = "margin-left: 1.4em:"> 可 以 挂号 吧 </p> 
</a> 
<i> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/5.png" alt = "3" class = "ui-li-icon icon-bg" style="top:0.6em"> 
<p style = "margin-left: 1.4em;"> 对 </p> 
</a> 
</li> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/5.png" alt = "3" class = "ui-li-icon icon-bg" style="top:0.6em"> 
<p style = "margin-left: 1.4em:"> 昨 晚 着 凉 感冒 了 一 </p> 
</a> 
</li> 
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<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/1.png" alt = "3" class = "ui-li-icon icon-bg" style="top:0.6em;left:278px;"> 
<p style = "margin-right: 42px;float:right"> 可 以 </p> 
<a> 
</li> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/1.png" alt = "3" class = "ui-li-icon icon-bg" style="top:0.6em;left:278px;"> 
<p style = "margin-right: 42px;float:right"> 注 意 身体 啊 ! </p> 
</a> 
<i> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/5.png" alt = "3" class = "ui-li-icon icon-bg" style="top:0.6em"> 
<p style = "margin-left: 1.4em:"> 好 一 </p> 
</a> 
</li> 
</ul> 
</div> 
<div data-role = "footer" data-position="fixed"> 
<input style="display:inline-block;width:250px;" type="text"/> 
<button style="display:inline-block"> 发 送 </button> 
</div> 
</div> 


Q: 这 里 需要 给 页 面 组 件 指定 一 个 id， 对 应 于 聊天 列表 页 面 设 定 的 跳 转 id 值 。 这 样 在 聊天 
ÉE m 列表 页 面 中 单 击 具体 的 聊天 项 ， 就 会 跳 转 到 对 应 的 聊天 详情 页 。 


聊天 详情 页 效果 如 图 28-3 所 示 。 
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图 28-3 
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整个 部 分 的 完整 代码 如 下 : 


<!DOCTYPE> 
<html> 
<head> 
<meta charSet = "utf-8" /> 
<meta name =" width = device-width, initial-scale = 1, maximum-scale = 1" /> 
<script src = "http://code.jquery.com/ jquery-1.8.0.min.js"></script> 
<script src = "http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> 
<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/ jquery.mobile-1.4.5.min.css"> 
<style type = "text/css"> 
.Con .alert í 
background: red; 
color: white; 
border-radius: 20px; 
} 
.ui-listview > .ui-li-has-icon > .ui-btn > img:first-child{ 
left: 0.3em; 
top: 1.5em; 


viewport" content = 


max-height: 2em; 
max-width: 2em; 
} 
#main .delete{ 
width: 50; 
display: none; 
background: red; 
; 
#main .con{ 
width: 100%; 
} 
Ui-li-count{ 
top: 30px; 
left: 272px; 
right: inherit; 
} 
.Ui-input-text{ 
width: 250px; 
display: inline-block; 
|; 
.ui-panel í 
width: 15em; 
; 
-ui-panel-animate.ui-panel-page-content-position-left{ 
transform: translate3d(15em,0,0); 
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.Ui-btn-toll{ 
width: 80px; 

h 

</style> 

</head> 

<body> 

<div data-role = "page"> 
<div data-role="panel" id="myPanel"> 


</div> 
<div data-role = "header" data-position="fixed"> 
<hl> 页 面 头 部 <hl> 


<a href="#myPanel" class="ui-btn ui-btn-inline ui-comer-all ui-shadow"> 
<img src = "images/1.png" alt = "1" class = "ui-li-icon icon-bg" style="width: 16px;height:16px;"> 
<a> 
</div> 
<div data-role = "main" id="main" class="ui-content"> 
<ul data-role = "listview"> 
<li data-icon = false> 
<a href = "#xiaozhang" class = "con" data-transition="slide"> 
<img src = "images/1.png" alt = "1" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: lem;"> 小 张 </h2> 
<p style = "margin-left: l.4em;">#f—</p> 
<la> 
<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
</li> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/2.png" alt = "2" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: lem:"> 小 李 </h2> 
<p style = "margin-left: 1.4em;"> 什 么 时 候 开 始 上 班 汪 </p> 
<span class = "alert ui-li-count">13</span> 
</a> 
<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
<i> 
<li data-icon = false> 
<a href = "#links" class = "con"> 









<img src = "images/3.png" alt = "3" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: lem;"> 小 王 </h2> 
<p style = "margin-left: 1.4em;"> 在 不 在 </p> 
<span class = "alert ui-li-count">2</span> 
<la> 
<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
</i> 
<li data-icon = false> 
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<a href = "#links" class = "con"> 
<img src = "images/4.png" alt = "3" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: 1em;">Allen</h2> 
<p style = "margin-left: 1.4em:"> 拜 拜 </p> 
<span class = "alert ui-li-count">1 </span> 
</a> 
<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
<i> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/5.png" alt = "3" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: 1lem;"> 宝 宝 </h2> 
<p style = "margin-left: 1.4em;"> 在 吗 ? </p> 
</a> 
<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
<> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/1.png" alt = "3" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: lem;">Web 前 端 交流 群 </h2> 
<p style = "margin-left: 1.4em;'> 怎 么 使 用 JQuery Mobile 开发 ? </p> 
<span class = "alert ui-li-count">99+</span> 
</a> 
<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
</li> 
<li data-icon = false> 
<a href = "#links" class = "con"> 








<img src = "images/1.png" alt = "3" class = "ui-li-icon icon-bg"> 
<h2 style = "margin-left: lem;"> 移 动 Web 开发 者 群 </h2> 
<p style = "margin-left: 1.4em:"> 推 荐 一 个 移动 Web 开发 框架 </p> 
<span class = "alert ui-li-count">99+</span> 
</a> 
<a class="delete" href = "#" data-icon="delete"> 删 除 </a> 
</li> 
</ul> 
</div> 
<div data-role = "footer" data-position="fixed" style="text-align:center;"> 
<div data-role="controlgroup" data-type="horizontal"> 
<a href="#" class="ui-btn-toll ui-btn ui-corner-all ui-shadow ui-icon-comment ui-btn-icon-top"> 消 息 
</a> 
<a href="#" class="ui-btn-toll ui-btn ui-corner-all ui-shadow ui-icon-user ui-btn-icon-top"> 联 系 人 
</a> 
<a href="#" class="ui-btn-toll ui-btn ui-corner-all ui-shadow ui-icon-star ui-btn-icon-top"> 动 态 </a> 
</div> 
</div> 
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</div> 
<div data-role = "page" id = "xiaozhang"> 
<div data-role="header"> 
<hl> 小 张 <hl> 
</div> 
<div data-role = "main"> 
<ul data-role = "listview"> 
<li data-icon = false> 
inks" class = "con"> 








<img src = "images/5.png" alt = "3" class = "ui-li-icon icon-bg" style="top:0.6em"> 


<p style = "margin-left: 1.4em;"> 有 哪个 医院 周末 也 正常 上 班 吗 ? </p> 














</a> 
</li> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/1.png" alt = "3" class = "ui-li-icon icon-bg" style="top:0.6em;left:278px;"> 
<p style = "margin-right: 42px;float:right"> 开 发 区 医院 啊 </p> 
</a> 
</i> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
<img src = "images/1.png" alt = "3" class = "ui-li-icon icon-bg" style="top:0.6em;left:278px;"> 
<p style = "margin-right: 42px;float:right"> 你 生病 了 吗 </p> 
</a> 
</li> 


<li data-icon = false> 
<a href = "#links" class = "con"> 





<img src = "images/5.png" alt = "3" class = "ui-li-icon icon-bg" style="top:0.6em"> 
<p style = "margin-left: 1.4em;"> 可 以 挂号 吧 </p> 
</a> 
</i> 


<li data-icon = false> 
<a href = "#links" class = "con"> 





<img src = "images/5.png" alt = "3" class = "ui 
<p style = "margin-left: 1.4em;"> 对 </p> 
</a> 
<Ni> 
<li data-icon = false> 
<a href = "#links" class = "con"> 


icon icon-bg" style="top:0.6em"> 





<img src = "images/5.png" alt = "3" class = "ui-li-icon icon-bg" style="top:0.6em"> 
<p style = "margin-left: 1.4em:"> 昨 晚 着 凉 感冒 了 一 </p> 
<la> 
<i> 
<li data-icon = false> 
<a href = "#links" class = "con"> 
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<img src = "images/1.png" alt = "3" class = "ui-li-icon icon-bg" style="top:0.6em;left:278px;"> 
<p style = "margin-right: 42px;float:right"> 可 以 </p> 
<a> 
</i> 
<li data-icon = false> 
<a href = "#links" class = "con"> 








=" 





<img src = "images/1.png" alt = "3" class = "ui-li-icon icon-bg" style="top:0.6em;left:278px;"> 
<p style = "margin-right: 42px;float:right"> 注 意 身体 啊 ! </p> 
</a> 
<i> 
<li data-icon = false> 
<a href = "#links" class = "con"> 





<img src = "images/5.png" alt = "3" class = "ui-li-icon icon-bg" style="top:0.6em"> 
<p style = "margin-left: l.4em;">#f—</p> 
</a> 
<i> 
</ul> 
</div> 
<div data-role = "footer" data-position="fixed"> 
<input style="display:inline-block;width:250px;" type="text"/> 
<button style="display:inline-block"> 发 送 </button> 
</div> 
</div> 
</body> 
</html> 


这 样 ， 就 完成 了 一 个 类 似 QQ 的 Web 聊天 应 用 。 


